首页 > 编程语言> 文章详细

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

2019-07-29 19:36:28 阅读：163 来源： 互联网

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

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

我用谷歌搜索,但找不到任何相关的东西.我做了一个简单的Sphere渲染并尝试在firebug中看到DIV内容,但是只有一个画布,并且在画布上添加任何“onclick”会使所有画布的事件发生,也就是说,它不仅仅用于球体或光线.

有什么建议？

解决方法:

你需要几件东西来获得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示例.
如果有疑问,检查是否有一个解决问题的例子总是好的.

标签：javascript,three-js,event-handling,javascript-events
来源： https://codeday.me/bug/20190729/1574745.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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