更改three.js對象的幾何圖形

我正在嘗試更改three.js場景中某些對象的幾何圖形。我有一個幾乎可以工作的代碼片段，點擊鼠標觸發更改，但出現以下問題：只在第一個鼠標單擊時更改了（呈現的）形狀，即使幾何圖形也被以下各項成功修改點擊。使用three.js庫的v66或v68，如果相關。更改three.js對象的幾何圖形

我看過Three.js: Completely change object's Geometry和Updating a geometry inside a mesh does nothing，但無法讓我的代碼工作到目前爲止。

的我的代碼相關部分：

var count = 0, item, geometry; 
var geoms = [new THREE.SphereGeometry(2), new THREE.BoxGeometry(3, 3, 3)]; 


function init() { 

    geometry = geoms[count]; 
    item = new THREE.Mesh(geometry, material); 
    scene.add(item); 

} 

// Mouse click listener. 
function handleClick(event) { 
    count = 1 - count; 
    geometry = geoms[count]; 
    item.geometry = geometry; 

    /* With that next line, on the first click, the sphere 
    * becomes a cube (as intended), but further clicks don't 
    * change the view anymore, even though item.geometry is 
    * modified. 
    */ 
    item.geometry.buffersNeedUpdate = true; 

    /* If I try next line instead, I got the following error: 
    * "TypeError: l.geometryGroupsList is undefined" 
    * from three.js. 
    */ 
    // item.geometry.verticesNeedUpdate = true; 
}

Here是一個（非）工作實施例的一個的jsfiddle。屏幕上有一個球體，點擊將使其成爲一個立方體。更多的點擊應該在球體和立方體之間切換，但屏幕上沒有任何變化。

來源

2014-09-10 Saters

我不知道爲什麼發生這種情況。一旦使用幾何對象就無法更新網格的幾何圖形。

.clone()在這種情況下起作用。

item.geometry.dispose(); 
item.geometry = geometry.clone();

dispose()以前的幾何對象以防止內存泄漏。

會有更好的解決方案。

來源

2014-09-10 14:59:27

謝謝你的回答。那麼它是否是圖書館中的一個錯誤（如果是這樣，是否值得報告）？ – Saters 2014-09-11 07:29:11

這應該不是一個錯誤。渲染開始之前，幾何圖形必須轉換爲ArrayBuffers，這個操作非常昂貴。這就是爲什麼你必須更新幾何。 – 2014-12-03 07:21:55

，我發現這個代碼運行速度最快：

item.geometry.computeFaceNormals(); 
    item.geometry.computeVertexNormals(); 
    item.geometry.normalsNeedUpdate = true; 
    item.geometry.verticesNeedUpdate = true; 
    item.geometry.dynamic = true;

來源

2014-12-25 00:32:27

更改three.js對象的幾何圖形

回答

相關問題