请解释一下三个.js Raycaster 方向参数

Question

我正在尝试从我在 Three.js 场景中布置的网格中获取碰撞检测。我对 Raycaster reallu 的工作原理以及我是否做对感到困惑。

这里是描述我有什么问题的小提琴

//Add cuba at 40/40
geometry = new THREE.CubeGeometry(20, 20, 20);
material = new THREE.MeshNormalMaterial();
mesh = new THREE.Mesh(geometry, material);
mesh.position.setY(40)
scene.add(mesh);


//Add Ray    
var origin = new THREE.Vector3(50, 0, 0),
    direction = new THREE.Vector3(-1,0,0),
    ray = new THREE.Raycaster(origin, direction),
    collisionResults = ray.intersectObjects([mesh]);
if(collisionResults.length!==0){
   alert('Ray collides with mesh. Distance :' + collisionResults[0].distance)
}

//Add Arrow to show ray
scene.add( new THREE.ArrowHelper(direction, origin, 50, 0x000000));

不工作： http://jsfiddle.net/FredricBerling/LwfPL/1/

工作： http://jsfiddle.net/FredricBerling/LwfPL/3/

基本上，小提琴布置了一个立方体，50 个点形成了我在“方向”上射出的光线。问题似乎是它声明了一个“命中”，即使它不应该。

我布置了一个 Arrowhelper 以显示我怀疑 Raycaster 在哪里发射它的光线。

从其他测试看来，Raycaster 中的方向与 Arrowhelper 中的方向不同。 Raycaster 似乎将光线射入场景的 0,0,0。我很困惑

编辑！。罗布给出了答案。我需要确保网格被渲染，以便应用世界矩阵。 Fiddle 已更新为可按预期测试 Raycaster 的正确代码。

Answer 1

您看到的明显误报是因为即使您设置了框的位置，它的世界变换矩阵还没有更新。这通常只发生在渲染之前。

如果您将光线投射测试移到第一次渲染之后（或手动调用updateWorld()），您将不会获得成功。