threejs raycasting does not work

Question

I'm having a problem trying to write a unit test to check collision detection. I simplify code as only this possible - I have a plane in (0, 0, 0) and I do raycasting from above this plane (from (0, 100, 0)) to bottom (0, -1, 0) and I suppose to find intersections with that plane but no luck.

console.clear();
var intersections,
    from = new THREE.Vector3(0, 100, 0);
    direction = new THREE.Vector3(0, -1, 0),
    raycaster = new THREE.Raycaster();

var geometry = new THREE.PlaneGeometry(10, 10, 1, 1);
var ground = new THREE.Mesh(geometry);
ground.position.set(0, 0, 0);
ground.rotation.x = THREE.Math.degToRad(-90);

raycaster.set(from, direction);
intersections = raycaster.intersectObjects([ground]);
console.log(intersections);

What is wrong here? Why this simple code does not show any intersections? (r73).

jsfiddle example

score 7 · Accepted Answer · answered Nov 24 '15 at 02:03

You need to update the world transform of the ground mesh prior to raycasting. (Normally, the renderer does this for your in the render() call.)

console.clear();
var intersections,
    from = new THREE.Vector3(0, 100, 0);
    direction = new THREE.Vector3(0, -1, 0),
    raycaster = new THREE.Raycaster();

var geometry = new THREE.PlaneGeometry(10, 10, 1, 1);
var ground = new THREE.Mesh(geometry);
ground.position.set(0, 0, 0);
ground.rotation.x = THREE.Math.degToRad(-90);

ground.updateMatrixWorld(); // add this

raycaster.set(from, direction);
intersections = raycaster.intersectObjects([ground]);
console.log(intersections);

three.js r.73

threejs raycasting does not work

1 Answers1

Linked