Raycasting doesn't give any intersections

问题:

I'm trying to to use raycasting to get the intersection between a sphere and a ray, both located at the center of the scene. It's a pretty simple scenario but I'm not being able to make it work.

Relevant code:

// renderer, camera, etc...

var material = new THREE.MeshStandardMaterial();
material.opacity = 0.25;
material.transparent = true;
sphere = new THREE.Mesh(new THREE.SphereGeometry(100, 32, 32), material);
scene.add(sphere);

var start = new THREE.Vector3(0, 0, 0);
var direction = new THREE.Vector3(-84, 102, 97);
var ray = new THREE.Raycaster(start, direction.normalize());
scene.updateMatrixWorld();
var rayIntersects = ray.intersectObjects([sphere], true);

console.log(rayIntersects); // empty array

回答1:

In case, when you want to get intersection between an object and a ray, casted from inside of the object, then, as an option, you should use a double-sided material.

Like so:

var material = new THREE.MeshStandardMaterial({ side: THREE.DoubleSide });

The documentation for THREE.Raycaster(), at the end of the part of explanation about the .intersectObject ( object, recursive ) method, says:

Note that for meshes, faces must be pointed towards the origin of the ray in order to be detected; intersections of the ray passing through the back of a face will not be detected. To raycast against both faces of an object, you'll want to set the material's side property to THREE.DoubleSide.