三个 JS - 移动对象时出现奇怪的光线投射行为 [英] Three JS - Strange raycast behaviour when objects are moved
问题描述
版本和信息
THREE.ObjectLoader2: 2.4.1
THREE.LoaderSupport.MeshBuilder: 1.2.1
THREE.LoaderSupport.WorkerSupport: 2.2.0
THREE.WebGLRenderer: 93
THREE.REVISION: 93
问题
当我对场景中的对象进行光线投射时，我发现它可以完美地工作到像素，直到我移动了对象.在我的程序中，我展开场景，因此我将所有对象和子对象从场景中心移开.
When I raycast an object in my scene, I found that it worked perfectly down to the pixel, until I moved the object. In my program I expload the scene, so I move all the objects, and child objects away from the center of the scene.
为了轻松地将问题可视化，而不是通过鼠标单击对单个点进行光线投射，我选择对整个屏幕进行光线投射，这就是我得到的结果(图 1)
To easily visualise the issue instead of raycasting a single point at a mouse click, I opted to raycast the entire screen, this is what I get (Figure 1)
(图 1)产生差距的原因是因为对每个像素进行光线投射需要很长时间，所以我每四个像素进行一次光线投射.中间有空隙的原因是我放大了原来的位置.
(Figure 1) The reason for the gaps is because it took to long to raycast every pixel, so instead I raycasted every fourth. The reason for the gap in the middle is because I zoomed away from the original position.
现在，看看当我 expload 对象时会发生什么(图 2)，
Now, see what happens when I expload the object (Figure 2),
(图2)如您所见，几乎有一个圆圈.这是为什么?
(Figure 2) As you can see, there is almost a circle. Why is this?
我的尝试
我在互联网上尝试了很多东西，当我找不到更多东西时才来到这里.
I've tried many things across the internet, and came here when I could find no more.
我尝试了一系列不同的模型，有些与其他模型的工作方式不同，这很奇怪.在 Blender 中创建的 lamborghini-aventador 最奇怪.
I've tried a range of different models, some work differently to others, strangely enough. The lamborghini-aventador which was created in Blender works the strangest.
为了查看是否是 exploading 代码的问题，我将对象移到了右侧.这就是事情变得有趣的地方(图 3).
To see if it was a problem with the exploading code, I moved the object to the right. This is where things get interesting (Figure 3).
(图 3)看起来好像我放在物体上的轮廓(轮廓是 EdgesGeometry)在后面，实际物体在中间，而光线投射更远.
(Figure 3) It looks as if my outlining I put on the object (the outlines are an EdgesGeometry) is behind, the actual object is in the middle, and the raycasts are further.
我的推测
我怀疑问题与缩放有关.所以我尝试删除我在代码中所做的所有缩放，但不幸的是我得到了相同的结果.
I suspect the issue is to do with scaling. So I tried removing all scaling I did in the code, however I got the same result, unfortunately.
如果这是一些菜鸟的错误，我深表歉意，但我确实希望它是 :)
Apologies if this is some noobie mistake, though I do hope it is :)
代码
对于那些敢于钻研我糟糕的代码库的人来说，这里是(大部分代码在 demo.js 中):
For those who are adventurous enough to delve into my terrible code base, here it is (the majority of the code is inside demo.js):
测试
按G拍摄光线(会冻结一点)，按X 展开，按S 取消展开.标准轨道控制.
Press G to shoot the raycasts (will freeze for a bit), press X to expload, press S to unexpload. Standard orbit controls.
我发现了什么
以下是我已经找到并尝试解决此问题的一些链接:
Here are some of the links I have already found and tried on this issue:
https://threejs.org/docs/#api/core/Raycaster
https://github.com/mrdoob/three.js/issues/1325(更新矩阵)
……还有更多……
有什么想法吗?
推荐答案
我认为您的模型可能没有生成正确的边界框/球体.圆形可能是由于光线通过了过小的边界球的边界球检查.
I think that your model might not have proper bounding boxes/spheres generated. The circular shape could result from the rays passing the bounding sphere check of a bounding sphere that is too small.
您提到以某种方式调整几何图形的大小/处理...之后，尝试调用 geometry.computeBoundingBox() 和 geometry.computeBoundingSphere() 来重建框和球体，看看是否有帮助?
You mention resizing/processing your geometries in some way... After you do that, try calling geometry.computeBoundingBox() and geometry.computeBoundingSphere() to rebuild boxes and spheres, and see if that helps?
显然这个问题是由于没有重新计算边界框和球体...
edit: Apparently this problem was due to bounding boxes and spheres not being recomputed...
解决方法是:
<代码>scene.traverse((o)=>if(o.geometry){o.geometry.computeBoundingBox();o.geometry.computeBoundingSphere();});
这篇关于三个 JS - 移动对象时出现奇怪的光线投射行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
