相機移動時更新對象的幾何形狀會導致毛刺-three.js

Question

我在更新three.js中的線的頂點時遇到問題

因此，我想在場景中有一條線，其起點始終在（0,0,0），終點始終在用戶屏幕的特定位置（以x，y坐標表示）。

我要做的（我幾乎成功了）要做的是讓一個不可見的平面始終朝着相機看，並且它的位置總是在相機前面。 之所以這樣做，是因為我希望該行看起來像“朝着”用戶的屏幕前進。 因此，我從所需的屏幕位置（以x，y為單位）“發送”了一個射線廣播器，然后檢查它在平面的哪個點相交，這就是我在three.js場景中的3D點。 然后，我更新直線的兩個頂點之一。

問題

我所做的工作正常，行尾是我想要的位置，但是更新相機和頂點時有些不同步，並導致一些明顯的故障。 當我移動相機時，線條不會快速，流暢地更新，因此，在看到已計算且令人滿意的線條之前，我會看到線條處於其他位置。

請看一下我創建的用於模擬該問題的jsfiddle 。

我該如何避免這些故障？

謝謝

我在render函數中使用的代碼：

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

該行將按照您描述的方式運行