Raycaster.intersectObjects() 没有返回任何东西？

Question

我设置我的场景如下：

document.addEventListener('mousedown', onDocumentMouseDown, false);

var container = document.getElementById("myCanvas");

scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth*0.99, window.innerHeight*0.99 );
container.appendChild( renderer.domElement );

room_material = new THREE.MeshBasicMaterial({color: 0x00ff00});
room_material.side = THREE.DoubleSide;

objects = [];

camera.position.z = 19;
camera.position.x = 5;
camera.position.y = 30;

我有一组对象，我试图检测点击是否与它们相交，定义如下：

var thing0 = new THREE.Shape();
thing0.moveTo(-12.1321728566, 35.3935535858);
thing0.lineTo(7.10021556487,35.3935535858);
thing0.lineTo(7.10021556487,19.7039735578);
thing0.lineTo(5.12636517425,19.7166264449);
thing0.lineTo(5.12636517425,33.6221493891);
thing0.lineTo(-12.1377356984,33.6439534769);
var thing0Geom = new THREE.ShapeGeometry(thing0);
var thing0Mesh = new THREE.Mesh( thing0Geom, room_material );
thing0Mesh.name = "abcd";
scene.add(thing0Mesh);
objects.push(thing0Mesh);

然后我使用以下代码渲染场景：

renderer.render(scene, camera);
requestAnimationFrame(render);

最后，我将以下代码用于鼠标单击事件：

function onDocumentMouseDown(event) {
    var vector = new THREE.Vector3(( event.clientX / window.innerWidth ) * 2 - 1, -( event.clientY / window.innerHeight ) * 2 + 1, 0.5);
    vector = vector.unproject(camera);
    var raycaster = new THREE.Raycaster(camera.position, vector.sub(camera.position).normalize());
    var intersects = raycaster.intersectObjects(objects, true);
    alert("well, you clicked!");
    if (intersects.length > 0) {
        alert("wow, it worked");
    }
}

但是，无论我做什么，警报在跟随时都不会被调用，raycaster.intersectObjects(objects, true);但是当它被放置在它之前的任何位置时它会被调用。raycaster.intersectObjects(objects, true);在这种情况下似乎有点黑洞？

我假设我的设置有问题？任何帮助，将不胜感激！

Answer 1

我尝试过的两件事是有效的：

1)Three.DoubleSide如果您的网格面没有指向光线的原点，请确保您正在使用。这直接来自文档：

“请注意，对于网格，面必须指向光线的原点才能被检测到；穿过面背面的光线的交叉点将不会被检测到。要对物体的两个面进行光线投射，您将想要将材料的侧属性设置为 THREE.DoubleSide。”

2) 在光线投射之前使用 mesh.updateMatrixWorld()。这来自另一篇 stackoverflow 帖子：threejs raycasting 不起作用

mesh.updateMatrixWorld(); // add this

raycaster.set(from, direction);