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座標

回答

相關問題