THREE.js issue with intersecting objects

Question

I'm having an issue detecting object intersections with THREE.js. My objects are being extruded from a 2D geometry like such:

var geoShape = new THREE.Shape(vertexes);
var geometry = new THREE.ExtrudeGeometry(geoShape, { bevelEnabled: false, amount: 3 });

var mesh = THREE.SceneUtils.createMultiMaterialObject(geometry,
    [new THREE.MeshLambertMaterial({ color: '#493D26' })]
);
scene.add(mesh);

I am then trying to detect intersection like this:

container.mousedown(function (e) {

    event.preventDefault();

    var vector = new THREE.Vector3((e.clientX / window.innerWidth) * 2 - 1, -(e.clientY / window.innerHeight) * 2 + 1, 0.5);
    projector.unprojectVector(vector, camera);

    var raycaster = new THREE.Raycaster(camera.position, vector.sub(camera.position).normalize());

    var intersects = raycaster.intersectObjects(scene.children);

    console.log(intersects);
});

Everytime, my intersects array is empty. If I add a sphere to the scene, I get intersections, but only if I am zoomed in to z < 18. Any suggestions?

Answer 1

Add true

raycaster.intersectObjects(scene.children, true);

From Docs:

recursive (true) — If set, it also checks all descendants. Otherwise it only checks intersecton with the object.