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

版本和信息

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):

github

测试

按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一个>

Three.js Raycaster 未检测到场景网格

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(按步骤操作)

……还有更多……

有什么想法吗?