Three.js：使用场景对象的子集进行光线投射

Question

正在尝试对 'earth' 对象上的单个标记进行光线投射。我可以让它读取地球对象，但无法弄清楚如何让它只读取标记。我确定这是一个范围问题，但我不确定如何准确修复它。

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

您可以使用如下模式对场景对象的子集进行光线投射：

var objects = [];

objects.push( marker ); // repeat

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

由于 marker 在您的情况下是一个组，请务必将递归标志设置为 true。

three.js r.99

Three.js：使用场景对象的子集进行光线投射

Three.js: raycasting with a subset of scene objects

javascript

three.js

raycasting