three.js 2D 鼠标点击到 3d 坐标使用 raycaster

Posted 2023-02-27

【中文标题】three.js 2D 鼠标点击到 3d 坐标使用 raycaster

【英文标题】：three.js 2D mouseclick to 3d co-ordinates using raycaster

【发布时间】：2016-04-17 23:07:41

【问题描述】：

我正在尝试在 z=0 平面上绘制 2D 对象，现在我想将屏幕鼠标坐标转换为 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，它的位置完全错误，为什么，为什么，为什么？

谁能给我一个可用的解决方案？

【问题讨论】：

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

***.com/questions/27862229/…

【参考方案1】：

看起来您的视口只覆盖了页面的一部分，而不是像所有这些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;