更改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对象的几何图形

回答

相关问题