在摄像机移动时更新对象的几何形状会导致故障 - 三个.js

Question

我在更新three.js 中的线的顶点时遇到问题

所以，我想在我的场景中有一条线，它的起点总是在（0,0,0），终点总是在用户屏幕的特定位置（在x，y坐标中）

为了实现这一点，我所做的（我几乎成功了）是让一个看不见的平面始终盯着相机，并且它的位置始终在相机前面一点。我这样做的原因是，我希望这条线看起来像是"走向"用户的屏幕。因此，我从所需的屏幕位置（x，y）"发送"一个光线投射器，然后检查它与平面的哪个点相交，这就是我在three.js场景中的3D点。然后我更新这条线的两个顶点中的一个。

问题

我所做的工作很好，线端是我想要的位置，但在更新相机和顶点时出现了一些不同步的情况，导致了一些明显的故障 当我移动相机时，线不会快速而平滑地更新，因此，我在计算和理想的位置看到线之前，先看到了其他位置的线。

请看一下我创建的这个jsfiddle来模拟这个问题。

我该怎么做才能避免这些故障？

感谢

我在渲染函数中使用的代码：

    var cameToCenterScaled = camera.position.clone();
    cameToCenterScaled.setLength(cameToCenterScaled.length()*0.9);
    plane.position.set(cameToCenterScaled.x, cameToCenterScaled.y, cameToCenterScaled.z); 
    plane.lookAt(camera.position);
    // define in pixels where in screen we want the line to end
    var notePos = findNotePoint(120,30); 
    linemesh.geometry.vertices[ 1 ].set(notePos.x, notePos.y, notePos.z) ; 
    linemesh.geometry.verticesNeedUpdate = true;

Answer 1

当您从相机设置光线投射器时，您必须确保相机矩阵已更新

只需添加

camera.updateMatrixWorld();

在你打电话给之前

raycaster.setFromCamera( new THREE.Vector2( x_, y_ ) , camera ); 

并且该行的行为将与您描述的一样