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');

  }

Answer 1

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