javascript - 三个 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)

(图 1) 产生间隙的原因是因为对每个像素进行光线转换需要很长时间，所以我改为每四个像素进行一次光线转换。中间有空隙的原因是因为我从原来的位置拉远了。

现在，看看当我展开对象时会发生什么(图 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();} );