three.js的调试面板工具

通过可视化页面来进行3D的参数调试，如果手动的修改都动参数的话，会很繁琐，dat.gui是通过可视化的面板，来实时调整这些参数。如下图：

使用：

安装依赖

复制代码

npm install dat.gui
//如果是ts开发，需要安装一下类似声明
npm install @types/dat.gui

基本使用：

复制代码

import * as dat from "dat.gui"


// 创建一个几何对象
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

// 创建 GUI 对象
const gui = new dat.GUI();

// 创建控制面板
const cubeFolder = gui.addFolder("立方体");


// 添加位置控制
cubeFolder.add(mesh.position, "x", -5, 5).name("X 位置");
cubeFolder.add(mesh.position, "y", -5, 5).name("Y 位置");
cubeFolder.add(mesh.position, "z", -5, 5).name("Z 位置");

// 添加缩放控制
cubeFolder.add(mesh.scale, "x", 0.1, 5).name("X 缩放");
cubeFolder.add(mesh.scale, "y", 0.1, 5).name("Y 缩放");
cubeFolder.add(mesh.scale, "z", 0.1, 5).name("Z 缩放");

// 添加角度和颜色控制参数
const params = {
  rotationX: 0,
  rotationY: 0,
  rotationZ: 0,
  color: "#00ff00",
};

// 添加旋转控制（使用角度）
cubeFolder
  .add(params, "rotationX", 0, 180)
  .name("X 旋转(度)")
  .onChange(value => {
    mesh.rotation.x = THREE.MathUtils.degToRad(value);
  });
cubeFolder
  .add(params, "rotationY", 0, 180)
  .name("Y 旋转(度)")
  .onChange(value => {
    mesh.rotation.y = THREE.MathUtils.degToRad(value);
  });
cubeFolder
  .add(params, "rotationZ", 0, 180)
  .name("Z 旋转(度)")
  .onChange(value => {
    mesh.rotation.z = THREE.MathUtils.degToRad(value);
  });

// 添加颜色控制
cubeFolder.addColor(params, "color").name("颜色").onChange(value => {
	material.color.set(value);
});

// 默认展开文件夹
cubeFolder.open();

// 渲染循环
function animate() {
  requestAnimationFrame(animate);
  // 为了方便操作，这里注释掉更新旋转的代码
  // mesh.rotation.x += 0.01;
  // mesh.rotation.y += 0.01;
  controls.update();
  renderer.render(scene, camera);
}

注意：

gui.add(target, 'prop', min, max) 的契约极其朴素：它读 target[prop] 当初值，滑动时执行 target[prop] = v。

position和scale的设置可以直接将mesh的position和scale对象传入。但是rotation和color的设置却不能直接传入mesh的rotation和color。

target.rotation的参数值单位是弧度，所以我们在转换度数的时候还需要进行计算，很复杂；所以通过THREE.MathUtils.degToRad(value)可以将度数进行转换成我们需要的值即可。

material.color 是 THREE.Color 对象，内部存的是三个 0~1 的浮点 r/g/b；而 addColor 给你的是 "#00ff00" 这种字符串。material.color.set(value) 所以需要通过set来进行解析成r/g/b。