Three.js 中几何图形的事件处理? [关闭]

2024-04-18

我正在寻找对 Three.js 中的几何图形/相机/灯光(我们添加到场景中的东西)进行某种事件处理?

我用谷歌搜索但找不到任何相关内容。我做了一个简单的球体渲染,并尝试在 firebug 中查看 DIV 内容,但只有一个画布,并添加任何onclickto the canvas 使事件适用于所有画布,也就是说,它不仅仅是针对球体或灯光。

有什么建议吗?


要获得 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 http://mrdoob.github.com/three.js/examples/canvas_interactive_cubes.html库附带的示例。 如有疑问,最好检查一下是否已有解决问题的示例。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Three.js 中几何图形的事件处理? [关闭] 的相关文章

随机推荐