如何在dat.gui.js中同时控制多个three.js的mesh？

Question

dat.gui.js如何同时控制多个three.js的mesh。新人不太会用three.js

现在页面有多个mesh同时生成了多个控制面板，有办法一个控制面板控制所有Mesh吗

Answer 1

你可以通过将所有mesh的相同属性放入一个数组或对象中，然后在dat.gui.js中创建一个控制器来同时控制这些属性。以下是一个简单的示例：

// 假设你有一个mesh数组var meshes = [mesh1, mesh2, mesh3];// 创建一个对象，包含所有mesh的公共属性var controllerObject = {  color: {    value: new THREE.Color(0xff0000),    min: 0,    max: 1  },  scale: {    value: 1,    min: 0,    max: 10  }  // 可以添加更多的属性...};// 创建一个控制器，控制所有的meshvar controller = gui.add(controllerObject, 'color').name('颜色');controller.onChange(function(value) {  meshes.forEach(function(mesh) {    mesh.material.color = new THREE.Color(value);  });});var scaleController = gui.add(controllerObject, 'scale').name('缩放');scaleController.onChange(function(value) {  meshes.forEach(function(mesh) {    mesh.scale.set(value, value, value);  });});

以上代码将创建两个控制器，一个是用来改变所有mesh颜色的，一个是用来改变所有mesh缩放的。当你改变控制器的值时，所有的mesh都会被相应地改变。