在Three.js中動態添加頂點到一條線

我想出瞭如何在三個j中繪製一條線，問題是我需要動態地將頂點添加到該線。當我動態添加頂點到線時，場景不會更新。我試過geometry.verticesNeedUpdate = true，這似乎不起作用。在Three.js中動態添加頂點到一條線

來源

2013-02-12 K2xL

編輯：使用BufferGeometry和drawcalls您現在可以實現等效功能。見Drawing a line with three.js dynamically。

three.js所r.71

動態添加頂點到線不被支持。正如Wiki說：

只能更新緩衝區的內容，你不能調整緩衝區（這是非常昂貴的，基本上等同於創造新的幾何形狀）。

您可以通過預先分配較大的緩衝區來模擬調整大小，然後保留不需要的頂點摺疊/隱藏。

three.js所r.55

來源

2013-02-12 20:16:00 WestLangley

thanks.i想我將只刪除並重新添加一個新行每一幀...只是似乎更低效 – K2xL 2013-02-13 06:34:54

我認爲WestLangley被提出的觀點是，試圖動態做到這一點是basicaly剛剛效率低下首先創建一個全新的幾何圖形，所以它的效率並不低。 – 0xor1 2013-02-13 09:11:02

我加入所有點由這行代碼到幾何： linegeometryX.vertices.push（新THREE.Vertex（新THREE.Vector3（X，Y，Z）））; 如何隱藏/摺疊不需要的頂點？ – Dipak 2013-12-16 12:38:32

我遇到了這個前兩天了。正如WestLangley所說，你不能做出真正的動態幾何體，但改變q有一些'僞造它'的策略，並在https://github.com/mrdoob/three.js/issues/342達到預期的效果。

關於你對最後一個答案的評論，不要只是從場景中刪除並重新添加一行新的每一幀 - 你（很可能）會招致巨大的性能影響。您需要使用更改後的第一個或第二個解決方法策略。

在我的應用我使用選項1是這樣的：

事先創建一個THREE.Geometry對象，並使用盡可能多的頂點初始化它，你認爲你需要（或以其他方式相當高的數量頂點）。（您還需要以某種方式隱藏它們，然後才能顯示它們 - 我將它們的位置設置爲脫離屏幕。）
使用該幾何創建THREE.Line對象並將其添加到場景中。
現在，當你想添加一個新的點到這條線時，你必須將索引到幾何對象的頂點，找到最後一個未使用的頂點，然後更新它 - 將座標更改爲真正的頂點，並設置geometry.verticesNeedUpdate = true;（否則它認爲沒有改變）。（見How to do updates在wiki）

我仍然對我的做法熨燙出來的疑難問題，但至少應該讓你得到一個行畫面繪製。

three.js r55

來源

2013-02-16 23:44:58 user1475135

如何防止屏幕上的點連接到要渲染的「真實」點？ – 2014-04-23 23:20:05

Max，現在已經有一段時間了，所以我不記得確切，但我想我將點（或連線）的顏色改爲與場景的背景顏色相同。所以連接仍然存在，但它不可見。 – user1475135 2014-05-24 16:50:03

正如WestLangley的回答所說，你不能那樣做。這是無可否認的解決辦法哈克我已決定使用：

分配更多的頂點比我更需要通過我行的起點填充geometry.vertices
作爲新的點進來，我想補充，該數組的內容轉移到左側，在geometry.vertices

代碼：要創建一個新的行：

function createNewLine(startingPoint){ 
    var geometry = new THREE.Geometry(); 
    for (i=0; i<MAX_LINE_POINTS; i++){ 
    geometry.vertices.push(startingPoint.clone()); 
    } 
    myLine = new THREE.Line(geometry, lineMaterial); 
    myLine.geometry.dynamic = true; 
    scene.add(myLine); 
    render(); 
}

把點添加到該行：

function addPoint(myPoint) { 
    myLine.geometry.vertices.push(myLine.geometry.vertices.shift()); //shift the array 
    myLine.geometry.vertices[maxLinePoints-1] = myPoint; //add the point to the end of the array 
    myLine.geometry.verticesNeedUpdate = true; 
    render(); 
}

你結束了，然後什麼是有一堆對方接着你居然要渲染的點的頂部堆放點的線。我在three.js git存儲庫上提交了一個問題，以更簡單地解決這個問題。 https://github.com/mrdoob/three.js/issues/4716

來源

2014-04-24 01:15:34

在Three.js中動態添加頂點到一條線

回答

相關問題