Question

我正在尝试更改three.js场景中某些对象的几何体。我有一个几乎正在工作的代码片段，鼠标单击触发更改，但遇到以下问题：（渲染）形状仅在第一次鼠标单击时更改，即使几何图形也是通过以下每次点击成功修改。使用v66或v68 of 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。屏幕上有一个球体，点击它会使它成为一个立方体。进一步的点击应该在球体和立方体之间切换，但屏幕上没有任何变化。

Answer 1

我不确切知道为什么会发生这种情况。一旦使用，它就无法通过几何对象更新网格的几何体。

.clone()适用于这种情况。

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

dispose()以前的几何对象，以防止内存泄漏。

会有更好的解决方案。

Answer 2

我发现此代码运行速度最快：

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

更改three.js对象的几何体

2 个答案: