Three.JS - 自定义网格上的光线投射答案

【问题标题】：Three.JS - Raycasting on custom meshThree.JS - 自定义网格上的光线投射
【发布时间】：2020-03-07 01:42:42
【问题描述】：

我目前正在尝试在three.js 中对自定义创建的网格进行光线投射。虽然光线投射对某些导入的网格很有效，但它似乎根本不适用于我的自定义网格。

经过一段时间的研究，我发现了一些自定义光线投射的典型问题，并尝试修复它们（updateMatrixWorld、双面材质、... - 参见下面的代码）。

我正在使用以下函数进行光线投射：

mouse.x = ((e.clientX - container.offsetLeft) / container.clientWidth) * 2 - 1;
mouse.y = -((e.clientY - container.offsetTop) / container.clientHeight) * 2 + 1;

rayCaster.setFromCamera(mouse, camera);
var intersect = rayCaster.intersectObjects(scene.getObjectByName('loaded_object').children, true); // working


mesh_1.geometry.computeFaceNormals();
mesh_1.updateMatrixWorld();
var intersect_custom = rayCaster.intersectObjects([mesh_1], true); // not working

虽然第一个相交按预期工作，但我的自定义相交根本不起作用 - 它总是返回一个空数组。
我的假设是否正确，问题必须是我的自定义网格？

下面是我创建自定义网格的方法：

material_k1.side = THREE.DoubleSide;
var singleGeometry_1 = new THREE.Geometry();
var mesh_1 = new THREE.Mesh(singleGeometry_1, material_k1);

meshes[i].updateMatrix();
singleGeometry_1.merge(meshes[i].geometry, meshes[i].matrix);

mesh_1.updateMatrix();
singleGeometry_1.verticesNeedUpdate = true;
singleGeometry_1.elementsNeedUpdate = true;
mesh_1 = new THREE.Mesh(singleGeometry_1, material_k1);

还有什么可能是问题？我真的很想知道，特别是因为它似乎不适用于我的自定义网格。

【问题讨论】：

何时以及如何将顶点和面添加到网格中？最好提供一个工作的实时代码示例，显示问题（代码 sn-ps、jsfiddle、codepen 等）

标签： javascript three.js mesh raycasting

【解决方案1】：

我在尝试了很长时间后自己发现了问题。我的代码很好，除了缺少一行。

添加后

mesh_1.geometry.computeBoundingSphere();

我的代码按预期工作。

光线投射似乎也需要边界球。
感谢您的帮助！希望这对遇到同样问题的人有所帮助。

【讨论】：