Three.js中几何体的事件处理？

Question

我正在寻找一种针对在three.js场景中添加的几何体/相机/灯光（things we add to scene）的事件处理方法？我已经搜索过谷歌，但没有找到相关内容。我尝试了简单的球体渲染，并试图在firebug中查看DIV内容，但只有一个画布，为画布添加任何onclick事件会使所有画布都受影响，也就是说，它不仅仅是针对球体或灯光的。有什么建议吗？

- Pheonix

Answer 1

要在3D中实现交互性，您需要完成以下几个步骤：

1. 获取鼠标位置的向量
2. 根据相机对鼠标向量进行反投影
3. 从相机位置向未投影的鼠标向量发射一条光线
4. 检查哪些对象与该光线相交并相应地更新。

听起来可能很复杂，但代码已经存在：

function onDocumentMouseDown( event ) {

                event.preventDefault();

                var vector = new THREE.Vector3( ( event.clientX / window.innerWidth ) * 2 - 1, - ( event.clientY / window.innerHeight ) * 2 + 1, 0.5 );
                projector.unprojectVector( vector, camera );

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

                var intersects = ray.intersectObjects( objects );

                if ( intersects.length > 0 ) {

                    intersects[ 0 ].object.material.color.setHex( Math.random() * 0xffffff );

                    var particle = new THREE.Particle( particleMaterial );
                    particle.position = intersects[ 0 ].point;
                    particle.scale.x = particle.scale.y = 8;
                    scene.add( particle );

                }

                /*
                // Parse all the faces
                for ( var i in intersects ) {

                    intersects[ i ].face.material[ 0 ].color.setHex( Math.random() * 0xffffff | 0x80000000 );

                }
                */
            }

这段代码来自于附带库中的canvas_interactive_cubes示例。当有疑问时，检查是否已经有解决该问题的示例通常是一个好习惯。

- George Profenza

---

那个演示对我不起作用。我点击方块，但什么也没有发生。自2012年以来它就坏了吗？ - Motionharvest

我有所怀疑。你使用的是什么浏览器（也许它不太支持Canvas）？ - George Profenza

是的。最近Chrome已经更新了，但当我打开“关于”屏幕时它又更新了一次。现在可以用了。耶，感觉自己像个新手。 - Motionharvest