如何在 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屬性。