JSONLoader 光线投射器和碰撞网格 - three.js

Question

我正在使用 raycaster 查看我是否用鼠标（或触摸）击中了一个网格物体很薄，我可以增加任何可以与射线相交的大小。与游戏对象一样，（使用 three.js）我可以添加自己的碰撞网格，它显然不会渲染，但会触发射线吗？

因此，当我的光线击中与原始网格关联的（不可见的）粉红色圆柱体时，它会触发相交。

我不能简单地制作另一个与原始网格分组的网格并使其可见 = false;或不透明度 = 0；那行不通。我正在寻找一些东西 'built in'（如果它存在）

非常感谢

Answer 1

您可以维护一组可单击的网格，而无需将它们添加到场景中。然后对这个集合进行光线投射：raycaster.intersectObjects(collection);

尽管如此，您可能必须将它们 "synchronized" 与其父对象一起保留。

Answer 2

您想将碰撞网格添加到响应光线投射但不渲染的场景。

为此，将碰撞网格添加为网格的子项，并将碰撞网格的 material 的可见性设置为 false。

collisionMeshMaterial = new THREE.MeshBasicMaterial( {
    visible: false
} );

碰撞网格不会渲染，但会响应光线投射。

three.js r.74

JSONLoader raycaster & collision meshes - three.js