Hello, I’m trying to hover over points using the mouse but I’m getting the following error: INTERSECTED.material.emissive is undefined
The code:
var stats, camera, scene, renderer, raycaster, points, clock, colors, drawCount;
var mouse = new THREE.Vector2(), INTERSECTED;
function init () {
drawCount = 0;
clock = new THREE.Clock();
scene = new THREE.Scene();
var light = new THREE.DirectionalLight( 0xffffff, 1 );
light.position.set( 1, 1, 1 ).normalize();
scene.add( light );
var embeddingSpace = document.getElementById('webgl-output');
camera = new THREE.PerspectiveCamera(60, embeddingSpace.clientWidth / embeddingSpace.clientWidth, 1, 10);
camera.position.set( 0, 0, 3 );
orbitControls = new THREE.OrbitControls(camera);
raycaster = new THREE.Raycaster();
renderer = new THREE.WebGLRenderer();
renderer.setSize( embeddingSpace.clientWidth, embeddingSpace.clientWidth );
embeddingSpace.appendChild(renderer.domElement);
stats = new Stats();
renderer.render(scene, camera);
embeddingSpace.appendChild(stats.dom);
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
}
}
draw(N_SAMPLES);
render();
function render() {
stats.update();
requestAnimationFrame(render);
if ( drawCount === 1 ) {
points.geometry.attributes.position.needsUpdate = true; // required after the first render
}
// find intersections
raycaster.setFromCamera( mouse, camera );
var intersects = raycaster.intersectObjects( scene.children, true );
if ( intersects.length > 0 ) {
if ( INTERSECTED != intersects[ 0 ].object ) {
if ( INTERSECTED ) INTERSECTED.material.emissive.setHex( INTERSECTED.currentHex );
INTERSECTED = intersects[ 0 ].object;
INTERSECTED.currentHex = INTERSECTED.material.emissive.getHex();
INTERSECTED.material.emissive.setHex( 0xff0000 );
}
} else {
if ( INTERSECTED ) INTERSECTED.material.emissive.setHex( INTERSECTED.currentHex );
INTERSECTED = null;
}
renderer.render(scene, camera)
}
}
function onDocumentMouseMove( event ) {
event.preventDefault();
mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
}
function draw (num) {
Array.prototype.unique = function(){
return this.filter(function(value, index, self){
return self.indexOf(value) === index;
});
}
function _draw(SAMPLE_DATA, SAMPLE_LABELS) {
var sampleData = SAMPLE_DATA;
var sampleLabels = SAMPLE_LABELS;
var labels = sampleLabels.unique();
var colorsLabels = [];
for ( var i = 0; i < labels.length; i ++ ) {
colorsLabels.push(Math.random() , Math.random(), Math.random());
}
var geometry = new THREE.BufferGeometry();
var positions = [];
colors = [];
var color = new THREE.Color();
for ( var i = 0; i < num; i ++ ) {
positions.push(0,0,0);
var label = labels.indexOf(sampleLabels[i]);
colors.push(colorsLabels[label*3],colorsLabels[label*3+1],colorsLabels[label*3+2]);
}
geometry.addAttribute( 'position', new THREE.Float32BufferAttribute( positions, 3 ) );
geometry.addAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );
geometry.computeBoundingSphere();
var material = new THREE.PointsMaterial( { size: 0.05, vertexColors: THREE.VertexColors } );
points = new THREE.Points( geometry, material );
scene.add( points );
drawCount = 1;
}