THREE.js从儿童摄像机到现场的Raycasting [英] THREE.js Raycasting from a child camera to the scene

问题描述

我想从我的相机中raycast鼠标在我的场景中的网格上做一些悬停和点击事件。

我的问题是，我的相机是目前另一个网格的子对象（为了更容易的相机移动/旋转），现在我的raycasting不工作（我假设因为相机是网格的孩子，而不是场景）。

这是我的代码的一部分：

  //相机设置
 var camera = new THREE .PerspectiveCamera（60，window.innerWidth / window.innerHeight，0.1，1000）; 
 
 var cameraTargetGeom = new THREE.SphereGeometry（0.5）; 
 var cameraTargetMaterial = new THREE.MeshLambertMaterial（{color：0xff0000，ambient：0xff0000}）; 
 var cameraTarget = new THREE.Mesh（cameraTargetGeom，cameraTargetMaterial）; 
 cameraTarget.position.set（0.15，0，5）; 
 scene.add（cameraTarget）; 
 cameraTarget.add（camera）; 
 
 camera.position.y = 18; 
 camera.rotation.x = Math.PI * -90 / 180; 
 
 
 
 //点击事件
 renderer.domElement.addEventListener（'click'，clickedCanvas）; 
 
 function clickedCanvas（e）{
 e.preventDefault（）; 
 
 mouse.x =（e.clientX / renderer.domElement.width）* 2  -  1; 
 mouse.y =  - （e.clientY / renderer.domElement.height）* 2 + 1; 
 
 raycaster.setFromCamera（mouse，camera）; 
 
 var intersects = raycaster.intersectObjects（scene.children，true）; 
 console.log（intersects）; 
 
 if（intersects.length> 0）{
> ...（编辑代码）
} 
} 
  

在我将相机添加到cameraTarget对象之前，它工作正常。

解决方案

如果你是raycasting，并且有一个 PerspectiveCamera 这是一个对象而不是场景的子对象，你需要设置raycaster的射线有点不同。

你需要考虑相机的世界位置。这是以下模式：

  var cameraPosition = new THREE.Vector3 
 
 ... 
 
 cameraPosition.setFromMatrixPosition（camera.matrixWorld）; // world position 
 
 raycaster.ray.origin.copy（cameraPosition）; 
 
 raycaster.ray.direction.set（mouse.x，mouse.y，0.5）.unproject（camera）.sub（cameraPosition）.normalize（）; 
 





---

编辑： 。您可以使用以下模式进行raycasting，即使相机是另一个对象的子对象，它也可以正常工作。它适用于透视和正交摄影机。

  var raycaster = new THREE.Raycaster //创建一次并重用
 var mouse = new THREE.Vector2（）; //创建一次并重用
 
 ... 
 
 mouse.x =（event.clientX / renderer.domElement.width）* 2  -  1; 
 mouse.y =  - （event.clientY / renderer.domElement.height）* 2 + 1; 
 
 raycaster.setFromCamera（mouse，camera）; 
 
 var intersects = raycaster.intersectObjects（objects，recursiveFlag）; 
  

three.js r.73

I am trying to raycast the mouse from my camera to do some hover and click events on meshes in my scene.

My problem is, that my camera is currently the child object of another mesh (for easier camera movement/rotation) and now my raycasting doesn't work (I assume because the camera is a child of the mesh, and not the scene).

This is parts of my code:

//camera setup
var camera = new THREE.PerspectiveCamera(60, window.innerWidth/window.innerHeight, 0.1, 1000);

var cameraTargetGeom = new THREE.SphereGeometry(0.5);
var cameraTargetMaterial = new THREE.MeshLambertMaterial({color: 0xff0000, ambient: 0xff0000});
var cameraTarget = new THREE.Mesh(cameraTargetGeom, cameraTargetMaterial);
cameraTarget.position.set(0.15, 0, 5);
scene.add(cameraTarget);
cameraTarget.add(camera);

camera.position.y = 18;
camera.rotation.x = Math.PI * -90 / 180;



// click event
renderer.domElement.addEventListener('click', clickedCanvas);

function clickedCanvas(e) {
    e.preventDefault();

    mouse.x = (e.clientX / renderer.domElement.width) * 2 - 1;
    mouse.y = -(e.clientY / renderer.domElement.height) * 2 + 1;

    raycaster.setFromCamera(mouse, camera);

    var intersects = raycaster.intersectObjects(scene.children, true);
    console.log(intersects);

    if (intersects.length > 0) {
        >... (redacted code)
    }
}

It was working fine before I added the camera to the cameraTarget object. How can I raycast from the camera now that it is a child of the cameraTarget?

解决方案

If you are raycasting and have a PerspectiveCamera that is a child of an object other than the scene, you need to set the raycaster's ray a little differently.

You need to take the camera's world position into consideration. Here is the pattern to follow:

var cameraPosition = new THREE.Vector3();

...

cameraPosition.setFromMatrixPosition( camera.matrixWorld ); // world position

raycaster.ray.origin.copy( cameraPosition );

raycaster.ray.direction.set( mouse.x, mouse.y, 0.5 ).unproject( camera ).sub( cameraPosition ).normalize();

---

EDIT: This is now automatically handled by the library. You can use the following pattern for raycasting, and it will work correctly even if the camera is the child of another object. It works for both perspective and orthographic cameras.

var raycaster = new THREE.Raycaster(); // create once and reuse
var mouse = new THREE.Vector2(); // create once and reuse

...

mouse.x = ( event.clientX / renderer.domElement.width ) * 2 - 1;
mouse.y = - ( event.clientY / renderer.domElement.height ) * 2 + 1;

raycaster.setFromCamera( mouse, camera );

var intersects = raycaster.intersectObjects( objects, recursiveFlag );

three.js r.73

这篇关于THREE.js从儿童摄像机到现场的Raycasting的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！