Javascript Object3D中的交集

我将一些对象添加到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值做了一些尝试，但没有成功

---

我添加了一个精简的示例，用于在上演示此问题。也许有人给了我一个简短的提示，它出了什么问题？

在你的小提琴里，因为你正在调用

THREE.SceneUtils.createMultiMaterialObject（）

，它创建了一个层次结构，你需要将递归标志添加到

ray.intersectObjects（）

编辑：

ray

现在是

THREE.Raycaster

——而不是

THREE.ray

---

three.js r.58

我也有同样的问题，WestLangley的答案提供了答案。干得好！对于在Object3D包装器中使用鼠标选择分组对象的任何人，我将发布我自己的解决方案

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

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

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

---

啊，好的，非常感谢！但现在它将所有3个立方体检测为一个对象。我还尝试使用自定义对象数组并添加了多维数据集，但结果是一样的。有没有一种方法可以检测每个立方体？你能发表一篇新的帖子，更详细地解释你的新问题吗？我找到了解决方案：所有的多材质对象都有相同的材质实例，因此材质颜色的变化会影响所有对象。所以现在很清楚了。非常感谢你！一个不适合人们阅读的方面，光线函数，至少在这个用例中，现在被调用Raycaster@PCoelho谢谢更新答案。

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

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