Three.js中几何的事件处理？ [英] Event handling for geometries in Three.js?

问题描述

我在google上搜索几何/相机/灯光（事情我们添加到场景中）的某种事件处理，找到任何相关的东西我做了一个简单的Sphere渲染，并尝试在firebug中看到DIV内容，但是只有一个画布，并且将任何onclick添加到画布中，使得所有画布的事件，也就是说，它不仅仅是球体或光线

任何建议？

解决方案

你需要一对夫妇o在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（矢量，相机）; 
 
 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）; 
 
} 
 
 / * 
 //解析所有面孔
 for（var i in intersects）{
 
 intersects [i] .face.material [0] .color.setHex（Math.random（）* 0xffffff | 0x80000000）; 
 
} 
 * / 
} 
  

以上代码来自图书馆随附的 canvas_interactive_cubes 示例。
如有疑问，请检查是否有一个解决问题的例子。

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 ?

解决方案

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

1. get a vector for the mouse position
2. unproject the mouse vector based on the camera
3. shot a ray from the camera position, towards the unprojected mouse vector
4. 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.

这篇关于Three.js中几何的事件处理？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！