Can't get the mouse intersection with points

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;
      }

PointsMaterial does not have an emissive property. The original example where this code section comes from uses MeshLambertMaterial.

1 Like

I see, thank you :slight_smile: Do you have an example of getting the clicked point from the PointsMaterial?

Try it with this one:

https://threejs.org/examples/webgl_interactive_points.html

1 Like

And this one, just in case :slight_smile:
http://discourse.threejs.hofk.de/2018/Interaction%20with%20Points/Interaction%20with%20Points.html

2 Likes