8

我在 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上演示此问题。也许有人对我有一个简短的提示，它出了什么问题？

4

2 回答 2

6

在您的小提琴中，因为您正在调用THREE.SceneUtils.createMultiMaterialObject( )创建分层结构的 ，您需要将递归标志添加到ray.intersectObjects().

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

EDiT:ray现在是 --not 的一个THREE.Raycaster实例THREE.Ray。

三.js r.58

于 2012-09-04T13:10:58.947 回答
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 );
于 2014-01-15T19:34:37.277 回答