相机移动时更新对象的几何形状会导致故障 - three.js

Question

我在 three.js

中更新线的顶点时遇到问题

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

我为实现这一目标所做的（我几乎成功了）是让一个不可见的平面始终注视着相机，并且它的位置始终在相机前面一点。我这样做的原因是因为我希望该行看起来像 "going towards" 用户的屏幕。所以我 "send" 从所需的屏幕位置（在 x、y 中）的光线投射器，我检查它与平面的哪个点相交，这是我在 three.js 场景中的 3D 点。然后我更新线的 2 个顶点之一。

问题

我做的很好，线的末端是我想要的地方，但是在更新相机和顶点时有些东西不同步并导致一些明显的故障。 当我移动相机时，线条不会快速平滑地自行更新，结果我在其他位置看到了线条，然后才在计算好的和理想的位置看到它。

请看一下我创建的这个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 );

并且该行将按照您描述的方式运行

相机移动时更新对象的几何形状会导致故障 - three.js

updating an object's geometry when camera is moving causes glitches - three.js

javascript

camera

updates

three.js

raycasting