Question

我通过在Three.js（http://mrdoob.github.io/three.js/examples/webgl_panorama_equirectangular.html）中进行球体全景来学习Three.js。点击时我需要在全景图中放置一个标记。但是，我不知道将2D位置的鼠标点击转换为3D世界。我尝试了光线拾取，但它不起作用（intersets变量总是返回[]）。

这是我的代码： //我创建了球体全景：

var geometry = new THREE.SphereGeometry( 500, 60, 40 );
geometry.applyMatrix( new THREE.Matrix4().makeScale( -1, 1, 1 ) );var material = new THREE.MeshBasicMaterial( {
                    map: THREE.ImageUtils.loadTexture( 'textures/2294472375_24a3b8ef46_o.jpg' )
                } );
mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );

//我抓住了事件鼠标：

 mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
 mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
 var vector = new THREE.Vector3(mouse.x, mouse.y, 0.5);
 projector.unprojectVector(vector, camera);
 var ray = new THREE.Ray(camera.position, vector.subSelf(camera.position).normalize());
 var intersects = ray.intersectObject(mesh);
     if (intersects.length > 0) {
       //code to add marker
     } else {
            //....
     }

请指教我解决这个问题。谢谢大家。

将鼠标单击位置转换为Three.js中的3D

0 个答案: