Three.js ray casting for particular Points

Question

I'm working on a network visualization using Three.js and am having trouble determining why my ray casting implementation is not identifying the correct points (Full example and source).

More specifically, I'm trying to use ray casting with a Points cloud, and am attempting to change the color of a point to white once users hover on the point. Right now, hovering points does change the color of points, but the event seems to be triggered on points near the cursor rather than immediately below the cursor.

Here is the code I'm using to initialize the ray caster:

// configure the raycaster
raycaster = new THREE.Raycaster();
raycaster.params.Points.threshold = 20;

Here is the render function:

function render() {
  renderer.render(scene, camera);
  controls.update();
  raycast();
}

// Color hovered points
function raycast() {
  raycaster.setFromCamera(mouse, camera); 
  var intersects = raycaster.intersectObject(particles);
  if (intersects.length) {

    var newColor = new THREE.Color();
    newColor.setRGB( 1, 1, 1 );

    var index = intersects[0].index;
    particles.geometry.colors[index] = newColor;
    particles.geometry.colorsNeedUpdate=true;
  }
}

And finally, the callback to the mousemove event triggered on the body:

/**
* Mouse coordinates go from 0 to container width {0:1} 
* and 0 to container height {0:1}. Multiply by 2
* and subtract 1 to center the mouse coords {-1:1}.
* Furthermore, negate the y axis coords, as in the DOM
* the origin is in the top left corner, while in WebGL
* the origin is in the bottom left corner.
**/

function onDocumentMousemove(e) {
  mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
  mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
}

Does anyone know why this code doesn't highlight the right points when users mouse around? Any insights would be very helpful!

Lidia

Hi Sir, your code link isn't working. Is there an updated one? It would be really helpful for the rest of us. I am unable to get it to work (discourse.threejs.org/t/…) – Understudy

This solution is only for legacy versions of Threejs, but it looks like @Marquizzo helped you on the Threejs boards :) – Lidia

Yes, he did :) But I am having difficulty in using that example to find flaw in my code. Or should I start with the example code and populate it with my points? – Understudy

In an effort to get more guidance on going from my code to what was suggested by marquizzo, I have also asked a question here on SO: #61822393 Sorry if I seem a noob, but I am. I am unable to make the jump from my code to the example suggested by marquizzo. – Understudy

I posted a reply to your query. Have fun with Three.js! – Lidia

Answer 1

In the process of typing out the question above, I realized that the raycaster.params.Points.threshold = 20; line was setting a threshold for my Points that was much larger than the Points themselves were:

pointMaterial = new THREE.PointsMaterial({
  size: 6,
  vertexColors: THREE.VertexColors
});

I decreased the raycaster.params.Points.threshold value to 5 and now the hovering seems to be picking up the right points.

Lidia