I am working on a single THREE.Points() representing a point cloud and I am trying to select individual points using mouse clicks.
starsGeometry = new THREE.Geometry();
for ( var i = 0; i < 10000; i ++ ) {
var star = new THREE.Vector3();
star.x = THREE.Math.randFloatSpread( 100 );
star.y = THREE.Math.randFloatSpread( 100 );
star.z = THREE.Math.randFloatSpread( 100 );
starsGeometry.vertices.push( star );
}
var starsMaterial = new THREE.PointsMaterial( { color: 0x888888 } );
starField = new THREE.Points( starsGeometry, starsMaterial );
scene.add( starField );
My current selection code is only able to select the entire Points object and not individual points.
mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
raycaster.setFromCamera( mouse, camera );
// calculate objects intersecting the picking ray
var intersects = raycaster.intersectObjects( scene.children );
for ( var i = 0; i < intersects.length; i++ ) {
intersects[ i ].object.material.color.set( 0xff0000 );
}