三 JS - 移动对象时奇怪的光线投射行为

Question

版本和信息

THREE.ObjectLoader2: 2.4.1
THREE.LoaderSupport.MeshBuilder: 1.2.1
THREE.LoaderSupport.WorkerSupport: 2.2.0
THREE.WebGLRenderer: 93
THREE.REVISION: 93

问题

当我在场景中对对象进行光线投射时，我发现它可以完美地工作到像素，直到我移动了对象。在我的程序中，我将场景展开，因此我将所有对象和子对象从场景中心移开。

为了轻松可视化问题，而不是在鼠标单击时对单个点进行光线投射，我选择对整个屏幕进行光线投射，这就是我得到的（图 1）

（图一） 产生间隙的原因是因为光线投射每个像素需要很长时间，所以我改为每四分之一进行一次光线投射。中间有空隙的原因是因为我从原来的位置放大了。

现在，看看我 expload 对象时会发生什么（图 2），

（图2） 如您所见，几乎有一个圆圈。这是为什么呢？

我的尝试

我在互联网上尝试了很多东西，当我找不到更多东西时来到这里。

我尝试了一系列不同的模型，有些模型的工作方式与其他模型不同，这很奇怪。在 Blender 中创建的 lamborghini-aventador 最奇怪。

为了查看是否是加载代码的问题，我将对象移到了右侧。这就是事情变得有趣的地方（图 3）。

（图 3） 看起来好像我放在对象上的轮廓（轮廓是 EdgesGeometry）在后面，实际对象在中间，而光线投射更远。

我的推测

我怀疑问题与缩放有关。所以我尝试删除我在代码中所做的所有缩放，但不幸的是，我得到了相同的结果。

抱歉，如果这是一些新手错误，但我希望它是:)

代码

对于那些有足够冒险精神去研究我糟糕的代码库的人，这里是（大部分代码都在 demo.js 中）：

github

测试它

按G 拍摄光线投射（会冻结一点），按X 展开，按S 取消展开。标准轨道控制。

我发现了什么

以下是我已经找到并尝试解决此问题的一些链接：

https://threejs.org/docs/#api/core/Raycaster

Three.js Raycaster not detecting scene mesh

https://github.com/mrdoob/three.js/issues/1325（更新矩阵）

http://barkofthebyte.azurewebsites.net/post/2014/05/05/three-js-projecting-mouse-clicks-to-a-3d-scene-how-to-do-it-and-how-it-works（循序渐进）

...还有更多...

有什么想法吗？

Answer 1

我认为您的模型可能没有生成正确的边界框/球体。 圆形可能是由于光线通过了太小的边界球的边界球检查。

您提到以某种方式调整/处理您的几何图形...之后，尝试调用 geometry.computeBoundingBox() 和 geometry.computeBoundingSphere() 来重建盒子和球体，看看是否有帮助？

编辑：显然这个问题是由于没有重新计算边界框和球体...

解决方法是：

scene.traverse( (o)=>if(o.geometry){o.geometry.computeBoundingBox();o.geometry.computeBoundingSphere();} );