如何在 three.js 中使用 dat GUI 动态更改几何属性？

Question

我用这个 function 做了一个球体几何

let createBall = () => {
  let geoBall = new THREE.SphereGeometry(5, 32, 16);
  let mat = new THREE.MeshPhongMaterial({ color: "red", transparent: true });

  ball = new THREE.Mesh(geoBall, mat);
  ball.position.set(0, 5, 0);
  ball.geometry.dynamic = true;
  ball.geometry.verticesNeedUpdate = true;
  ball.geometry.__dirtyVertices = true;

  scene.add(ball);
};

我在 window.onload function 中调用 function。 我还使用 dat GUI 来编辑几何属性，它是 ball.geometry 的 widthSegment 像这样

 ballFolder
    .add(ball.geometry.parameters, "widthSegments", 1, 64, 1)
    .onChange(function () {
      console.log(geoBall);
      ball.geometry.dispose();
      ball.geometry = geoBall.clone();
    });

当我在控制台中记录 geoBall 时，发现属性已更改，但 object 本身并未更改。 有谁知道如何解决这个问题？？

Answer 1

parameters中的值仅在创建几何时使用。 将几何生成器（ BoxGeometry 、 SphereGeometry等）视为工厂方法。 创建 object 后，更改参数无效。

所以我建议你在你的onChange()回调中创建一个新的几何图形，并在前一个回调上调用dispose() （你已经做了什么）。

顺便说一句：在最近的three.js版本中，几何对象没有dynamic 、 verticesNeedUpdate和__dirtyVertices属性。