THREE.js Raycasting from a child camera to the scene

Question

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?

Answer 1

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.clientWidth ) * 2 - 1;
mouse.y = - ( event.clientY / renderer.domElement.clientHeight ) * 2 + 1;

raycaster.setFromCamera( mouse, camera );

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

three.js r.84