THREE.js проблема с пересекающимися объектами

Question

У меня проблема с обнаружением пересечения объектов с THREE.js. Мои объекты выдавливаются из 2D геометрии, например:

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);

Затем я пытаюсь обнаружить пересечение, как это:

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);
});

Каждый раз мой массив пересечений пуст. Если я добавлю сферу на сцену, я получу пересечения, но только если я увеличу изображение до z < 18. Есть предложения?

Answer 1

Добавить истину

raycaster.intersectObjects(scene.children, true);

Из Документов:

рекурсивный (true) - если установлен, он также проверяет всех потомков. В противном случае он только проверяет пересечение с объектом.

Answer 2

Несколько причин могут привести к тому, что raycaster не будет собран должным образом, лучший способ отладить его, и чтобы убедиться, что ваш raycaster является правильным, я рекомендую вам визуализировать его, используя: raycaster.ray.origin и raycaster.ray.direction, линия может быть легко нарисована таким же образом в том же событии мыши, которое должно обнаружить пересечение:

var material = new THREE.LineBasicMaterial({
    color: 0x0000ff
});
var geometry = new THREE.Geometry();

geometry.vertices.push(new THREE.Vector3(raycaster.ray.origin.x, raycaster.ray.origin.y, raycaster.ray.origin.z));
geometry.vertices.push(new THREE.Vector3(raycaster.ray.origin.x + (raycaster.ray.direction.x * 100000), raycaster.ray.origin.y + (raycaster.ray.direction.y * 100000), raycaster.ray.origin.z + (raycaster.ray.direction.z * 100000)));
var line = new THREE.Line(geometry, material);

ПРИМЕЧАНИЕ. Примите во внимание, что луч будет визуализироваться, только если изменится точка зрения камеры!

Answer 3

Для меня решение было ответом Ухуры...

raycaster.intersectObjects(scene.children, true);

... ПЛЮС осознание того, что raycaster генерирует массив всех пересечений, а не только первое. Мой код перебирал все пересечения и отображал последнее, когда я хотел только первое. Так...

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

if(intersects.length > 0)
{
//Do something with intersects[0];
}