Three.js: raycasting with a subset of scene objects

Question

Trying to raycast individual markers on an 'earth' object. I can get it to read the earth object but can't figure out how to get it to read only the markers. I'm sure it's a scope issue but I'm not sure how to fix it exactly.

https://codepen.io/pfbarnet/pen/vQomLK

Earth.prototype.createMarker = function (lat, lon) {
    var marker = new Marker();

    var latRad = lat * (Math.PI / 180);
    var lonRad = -lon * (Math.PI / 180);
    var r = this.userData.radius;

    marker.position.set(Math.cos(latRad) * Math.cos(lonRad) * r, Math.sin(latRad) * r, Math.cos(latRad) * Math.sin(lonRad) * r);
    marker.rotation.set(0.0, -lonRad, latRad - Math.PI * 0.5);

    this.add(marker);

};

.....

raycaster.setFromCamera( mouse, camera );

  var intersects = raycaster.intersectObjects( earth.children );

  if ( intersects.length > 0 ) {

    if ( INTERSECTED != intersects[ 0 ].marker) {

      console.log('hovered');

    }

  } else {

    console.log('not hovered');

  }

WestLangley · Accepted Answer · 2018-12-07 17:39:25Z

2

You can raycast against a subset of scene objects using a pattern like so:

var objects = [];

objects.push( marker ); // repeat

var intersects = raycaster.intersectObjects( objects, true ); // recursive true

Since marker in your case is a group, be sure to set the recursive flag to true.

three.js r.99

answered Dec 7, 2018 at 17:39

WestLangley

105k11 gold badges288 silver badges285 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

pfbarnet Over a year ago

Thanks much for this! Pushing the markers into the objects array worked. However, now I'm having the issue of trying to get just a single item in the array to change color on hover, rather than the whole array of objects. Any advice? I've been using the interactive cubes example threejs.org/examples/?q=interacti#webgl_interactive_cubes but this doesn't utilize an array but rather the children.scene method. codepen.io/pfbarnet/pen/vQomLK. Any additional help would be appreciated!

WestLangley Over a year ago

All your objects are sharing the same material. Use material.clone() , instead, for your marker spheres and pins material.

Collectives™ on Stack Overflow

Three.js: raycasting with a subset of scene objects

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related