在Three.js中将鼠标单击位置转换为3D
我通过在Three.js()中执行sphere panorama来学习Three.js。单击时,我需要在全景图中放置一个标记。然而,我不知道如何将2D位置的鼠标点击转换为3D世界。我尝试了光线拾取,但没有成功(intersets变量总是返回[]) 这是我的代码: //我创建球体全景图:在Three.js中将鼠标单击位置转换为3D,three.js,Three.js,我通过在Three.js()中执行sphere panorama来学习Three.js。单击时,我需要在全景图中放置一个标记。然而,我不知道如何将2D位置的鼠标点击转换为3D世界。我尝试了光线拾取,但没有成功(intersets变量总是返回[]) 这是我的代码: //我创建球体全景图: var geometry = new THREE.SphereGeometry( 500, 60, 40 ); geometry.applyMatrix( new THREE.Matrix4().makeScal
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 {
//....
}
请告诉我解决这个问题的方法。
谢谢大家。这是一个很好的ray拾取示例,谢谢gaitat,但它没有像我上面所说的那样工作。我想要的是在sphere panorama上获得3D位置并给出一个标记。请升级到three.js r.67。这是mrdoob的一个示例,其版本为67。请将代码升级到r.67-compatible.:-)