Three.js中几何的事件处理？(Event handling for geometries in Three.js?)

Three.js中几何的事件处理？(Event handling for geometries in Three.js?)

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

我用谷歌搜索，但找不到任何相关的东西。 我做了一个简单的Sphere渲染，并试图在萤火虫中看到DIV内容，但只有一个画布，并且在画布上添加任何“onclick”会为所有画布创建事件，也就是说，它不仅仅适用于球体或灯光。

有什么建议么 ？

I am looking for some kind of event handling for geometries/cameras/lights(things we add to scene) in three.js ?

I googled but couldn't find anything relevant. I did a simple Sphere rendering and tried to see the DIV contents in firebug, but there's just one canvas, and adding any "onclick" to the canvas makes the event for all the canvas, that is, its not just for the sphere or light.

Any suggestions ?

最满意答案

你需要一些东西来获得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示例。 如果有疑问，检查是否有一个已经解决问题的例子总是很好的。

You need to a couple o things to get interactivity in 3D:

get a vector for the mouse position unproject the mouse vector based on the camera shot a ray from the camera position, towards the unprojected mouse vector check what object(s) interesect with that ray and update accordingly.

It might sound complicated, but the code's already there:

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 ); } */ }

This code above from the canvas_interactive_cubes example that comes with the library. When in doubt, it's always good to check if there's an example that solves the problem already.