Three.js 中几何的事件处理？ [关闭]答案

【问题标题】：Event handling for geometries in Three.js? [closed]Three.js 中几何的事件处理？ [关闭]
【发布时间】：2012-02-27 01:24:21
【问题描述】：

我正在为 three.js 中的几何/相机/灯光（我们添加到场景中的东西）寻找某种事件处理？

我用 Google 搜索，但找不到任何相关内容。我做了一个简单的 Sphere 渲染并试图在 firebug 中查看 DIV 内容，但是只有一个画布，并且在画布上添加任何 onclick 都会使所有画布的事件发生，也就是说，它不仅仅是球体或灯光.

有什么建议吗？

【问题讨论】：

标签： javascript three.js event-handling dom-events

【解决方案1】：

您需要做几件事才能在 3D 中获得交互性：

获取鼠标位置的向量
根据相机取消投影鼠标矢量
从相机位置向未投影的鼠标矢量拍摄光线
检查哪些对象与该射线相交并相应更新。

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

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 示例。如有疑问，最好检查一下是否已经有解决问题的示例。

【讨论】：

那个演示对我不起作用。我点击立方体，但没有任何反应。它自 2012 年以来就中断了吗？
我对此表示怀疑。你用的是什么浏览器（可能对Canvas不太支持）？
是的。它是最近更新的 chrome，但当我打开关于屏幕时它再次更新。现在工作。是的，我觉得自己像个菜鸟。