Question

我有一些对象添加到Object3D（用于分组元素），我试图检测它上面的点击。我的场景大小为600x400，我的相机位于三个对象内，我的事件处理程序代码如下所示：

function onDocumentMouseDown( event ) {
   event.preventDefault();

   var mouse = {};
   mouse.x = ( event.clientX / 600 ) * 2 - 1;
   mouse.y = - ( event.clientY / 400 ) * 2 + 1;

   var vector = new THREE.Vector3( mouse.x, mouse.y, 1 );
   projector.unprojectVector( vector, three.camera );

   var ray = new THREE.Ray( three.camera.position, vector.subSelf( three.camera.position ).normalize() );

   var intersects = ray.intersectObjects( group.children );
   alert(intersects.length);
   [...]
}

实际上我正在警告交叉物体的数量。但它保持为零。它找不到任何相交的物体。我已经对我的投影向量的x，y和z值进行了一些调整 - 没有成功。

我添加了一个精简样本，用于在jsfiddle上演示此问题。也许某人对我有什么问题的短暂暗示？

Answer 1

在你的小提琴中，因为你正在调用THREE.SceneUtils.createMultiMaterialObject( )，这会创建一个层次结构，你需要将递归标记添加到ray.intersectObjects()。

var intersects = ray.intersectObjects( group.children, true );

EDiT：ray现在是THREE.Raycaster的实例 - 而不是THREE.Ray。

three.js r.58

Answer 2

我遇到了同样的问题，WestLangley的回答提供了答案。很好！对于任何在鼠标选择Object3D包装器中分组的对象的人来说，我发布了自己的解决方案。

首先，我创建了一个可选择的对象数组 - 我希望这也可以节省一些性能，因为RayCaster不需要搜索场景中的所有对象，只需要搜索那些你想要选择的对象。我还将这个数组直接附加到场景对象（仅仅是因为它已经可以从我的应用程序的大多数部分访问）

scene.selectable = [];

下一步是将您希望选择的所有对象推送到此数组中。您将仅从您的组中插入网格/精灵/等，而不是整个组。这里只有最后一行很重要：

var myWrapper = new THREE.Object3D();
var myObject = new THREE.Mesh( something );
myWrapper.add( myObject );
scene.add ( myWrapper );
scene.selectable.push( myObject );

最后，在您的鼠标选择程序中，您将按照以下方式调用raycaster：

var intersects = ray.intersectObjects( scene.selectable );

Object3D中的交集

2 个答案: