8

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?

Peter O.
  • 32,158
  • 14
  • 82
  • 96
Ben
  • 99
  • 5

1 Answers1

8

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

WestLangley
  • 102,557
  • 10
  • 276
  • 276
  • Hmm struggled with this for a good day, still didn't work for me in r71, but updated the library to r73 (newest at this point) at it works. – Starwave Jan 10 '16 at 14:27
  • @Starwave Who knows? I changed the revision number just in case. : - ) – WestLangley Jan 10 '16 at 16:44
  • @WestLangley this example also works for me with the mouse. Is it possible to achieve this effect with the camera? I want to find the same effect as on a Google Cardboard having a crosshair in the center of the screen and when there's an intersection with the raycaster by looking at an object you can then hit a key to do something else. – Kevin Dec 22 '16 at 01:11