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!

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!

• javascript
• three.js
• raycasting

Share Improve this question Follow edited Jul 9, 2017 at 19:04 WestLangley 105k1111 gold badges287287 silver badges283283 bronze badges asked Jul 9, 2017 at 18:57 duhaimeduhaime 27.6k2121 gold badges194194 silver badges243243 bronze badges 5

• 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/t/…) – Ritesh Singh Commented May 15, 2020 at 5:41
• 1 This solution is only for legacy versions of Threejs, but it looks like @Marquizzo helped you on the Threejs boards :) – duhaime Commented May 15, 2020 at 15:56
• 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? – Ritesh Singh Commented May 15, 2020 at 16:02
• 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: stackoverflow./questions/61821893/… 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. – Ritesh Singh Commented May 15, 2020 at 16:08
• 1 I posted a reply to your query. Have fun with Three.js! – duhaime Commented May 15, 2020 at 17:22

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 14

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.