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

时间:2018-12-07 16:38:14

标签: javascript three.js raycasting

试图在“地球”物体上射线投射各个标记。我可以读取地面物体,但无法弄清楚如何仅读取标记。我确定这是一个范围问题,但是我不确定如何确切地解决它。

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

  }

1 个答案:

答案 0 :(得分:2)

您可以使用类似的模式针对场景对象的子集进行光线投射:

var objects = [];

objects.push( marker ); // repeat

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

由于您的情况下的marker是一个组,因此请确保将递归标志设置为true

three.js r.99