How to change geometry attributes dynamically using dat GUI in three.js?

Question

I made a sphere geometry with this 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);
};

and I call the function in window.onload function. I also use dat GUI to edit the geometry attribute which was the widthSegment of the ball.geometry like this

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

when I log the geoBall in the console, it turns out that the attribute has changed, but the object itself isn't changed. Anyone know how to solve this problem??

Answer 1

The values in parameters are only used when the geometry is created. Think of the geometry generators ( BoxGeometry , SphereGeometry etc.) as factory methods. Changing the parameters has no effect once the object is created.

So I suggest you create a new geometry in your onChange() callback and call dispose() on the previous one (what you already do).

BTW: In recent three.js version geometry objects do not have dynamic , verticesNeedUpdate and __dirtyVertices properties.