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

Question

我用这个函数制作了一个球体几何体

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函数中的函数。我还使用dat GUI编辑几何属性，它是球的widthSegment

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

当我在控制台中记录geoBall时，发现属性已经更改，但对象本身没有更改。有人知道如何解决这个问题吗？？

Answer 1

parameters中的值仅在创建几何体时使用。将几何生成器(BoxGeometry、SphereGeometry等(视为工厂方法。一旦创建了对象，更改参数就没有任何效果。

因此，我建议您在onChange()回调中创建一个新的几何体，并在上一个回调中调用dispose()(您已经做了(。

BTW：在最近的three.js版本中，几何体对象没有dynamic、verticesNeedUpdate和__dirtyVertices属性。