更改three.js对象's的几何形状

Changing a three.js object's geometry

本文关键字：几何形 three js 对象 更改      更新时间：2023-09-26

我正在尝试更改three.js场景中某些对象的几何体。我有一段几乎可以工作的代码，其中鼠标单击会触发更改，但出现了以下问题：（渲染的）形状只有在第一次鼠标单击时才会更改，尽管每次单击都会成功修改几何体。使用three.js库的v66或v68（如果相关）。

我读过Three.js：彻底改变对象'；s几何体和更新网格内的几何体没有任何作用，但到目前为止我的代码无法运行。

我的代码的相关部分：

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

下面是一个（非）工作示例的jsfiddle。屏幕上有一个球体，点击一下就会变成一个立方体。进一步的点击应该在球体和立方体之间切换，但屏幕上没有任何变化。

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

.clone()在这种情况下起作用。

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

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

会有更好的解决方案。

我发现这段代码运行得最快：

  item.geometry.computeFaceNormals();
  item.geometry.computeVertexNormals();
  item.geometry.normalsNeedUpdate = true;
  item.geometry.verticesNeedUpdate = true;
  item.geometry.dynamic = true;
相关文章：