Three.js 2D mouseclick 到 3d 坐标使用 raycaster [英] three.js 2D mouseclick to 3d co-ordinates using raycaster

问题描述

我正在尝试在 z=0 平面上绘制 2D 对象，现在我想将屏幕鼠标坐标转换为 3D 世界坐标.

我在下面使用了相机:

camera = new THREE.OrthographicCamera(SCREEN_WIDTH/- 2, SCREEN_WIDTH/2,SCREEN_HEIGHT/2, SCREEN_HEIGHT/- 2, NEAR, FAR );相机位置设置(0,0,500)；相机.看(场景.位置)；容器 = 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);场景.添加(地板)；targetList.push(地板);

我尝试了两种方法:1.答案:[问题]:鼠标/画布X, Y 到 Three.js World X, Y, Z

var vector = new THREE.Vector3();向量集(( event.clientX/window.innerWidth ) * 2 - 1,- ( event.clientY/window.innerHeight ) * 2 + 1,0.5);vector.unproject(相机);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(鼠标，相机)；var intersects = raycaster.intersectObjects(targetList);//如果有一个(或多个)交叉点if ( intersects.length > 0 ){控制台日志(相交[0].点)；console.log("Hit @" + toString(intersects[0].point));}

这在正常的地方工作正常，但是如果在#ThreeJS div之前添加width:300px;height:400px"#test div，它的位置完全错误，为什么，为什么，为什么?

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

解决方案

看起来你的视口只覆盖了页面的一部分，而不是像所有 Three.js 示例中的整个页面.在这种情况下，你需要确定你的实际鼠标坐标有点不同:所以使用 event.offsetX 而不是 clientX.当然，您需要实际的

尺寸而不是 window.innerWidth

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

I'm trying to draw 2D objects in z=0 plane, now I want to convert screen mouse co-ordinates into 3D world co-ordinates.

I used camera below:

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);

I tried two ways: 1.the answer of:[question]: 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 ) );

but it does't work for me!the pos is not the correct position in 3D world co-ordinates;To be honestly,I'm not understand this method actually...

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 ) );
}

This works right in normal place,but if add "width:300px;height:400px" #test div before #ThreeJS div,it went totally wrong position,WHY,WHY,WHY?

Could someone give me a usable solution?

解决方案

Looks like that your viewport covers only a part of the page and not the whole page like in all those examples of three.js. In this case you need to determine your actual mouse coordinates a bit different: so use event.offsetX instead of clientX. And of course you need your actual <div> dimensions instead of window.innerWidth

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

这篇关于Three.js 2D mouseclick 到 3d 坐标使用 raycaster的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！