three.js 2D mouseclick使用raycaster的3D坐标

我试图在z = 0平面绘制2D对象，现在我想将屏幕鼠标坐标转换为3D世界坐标。three.js 2D mouseclick使用raycaster的3D坐标

我用下面的相机：

camera = new THREE.OrthographicCamera(SCREEN_WIDTH/- 2, SCREEN_WIDTH/2,   
SCREEN_HEIGHT/2, SCREEN_HEIGHT/- 2, NEAR, FAR); 
camera.position.set(0,0,500); 
camera.lookAt(scene.position); 

container = document.getElementById('ThreeJS'); 
container.appendChild(renderer.domElement); 

var floorGeometry = new THREE.PlaneGeometry(1000, 1000, 10, 10); 
var material = new THREE.MeshBasicMaterial({color: 0x000000, opacity: 1}); 
var floor = new THREE.Mesh(floorGeometry, material); 
floor.position.set(0,0,0); 
scene.add(floor); 
targetList.push(floor);

我尝试了两种方式：1，答案：[提问]：Mouse/Canvas X, Y to Three.js World X, Y, Z

var vector = new THREE.Vector3(); 
vector.set(
(event.clientX/window.innerWidth) * 2 - 1, 
- (event.clientY/window.innerHeight) * 2 + 1, 
0.5); 
vector.unproject(camera); 
var dir = vector.sub(camera.position).normalize(); 
var distance = - camera.position.z/dir.z; 
var pos = camera.position.clone().add(dir.multiplyScalar(distance));

但它简化版，工作对我来说pos不是3D世界坐标中的正确位置;说实话，我实际上并不了解这种方法......

2: 
mouse.x = (event.clientX/window.innerWidth) * 2 - 1; 
mouse.y = - (event.clientY/window.innerHeight) * 2 + 1; 
var raycaster = new THREE.Raycaster(); 
raycaster.setFromCamera(mouse, camera); 
var intersects = raycaster.intersectObjects(targetList); 
// if there is one (or more) intersections 
if (intersects.length > 0) 
{ 
    console.log(intersects[0].point); 
    console.log("Hit @ " + toString(intersects[0].point)); 
}

这适用于正常的地方，但如果在#ThreeJS div之前添加“width：300px; height：400px”#test div，它完全错误的位置，为什么，为什么，为什么？

有人能给我一个可用的解决方案吗？

来源

2016-01-13 ristal-h

忘了，我用three.js所r.73 –

http://stackoverflow.com/questions/27862229/changing-raycaster-position-动态/ 27885851＃27885851 –

看起来您的视口仅覆盖页面的一部分，而不是整个页面，就像three.js的所有示例一样。在这种情况下，您需要确定您的实际鼠标坐标有点不同：所以请使用event.offsetX而不是clientX。当然，你需要你的实际<div>尺寸，而不是window.innerWidth

var mouse = new THREE.Vector2(); 
mouse.x = (event.offsetX/SCREEN_WIDTH) * 2 - 1; 
mouse.y = - (event.offsetY/SCREEN_HEIGHT) * 2 + 1;

来源

2016-01-14 19:21:47 Brakebein

谢谢，现在效果很好〜 –

谢谢，这节省了我的一天！ :) –

three.js 2D mouseclick使用raycaster的3D坐标

回答

相关问题