Three.js(七)——Debug UI (dat.GUI)

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第8天，点击查看活动详情 >>

dat.gui

在three.js观察物体变化不如网页方便，往往一次不能达到我们想要的位置，需要微调，而每次加载模型还需要一些时间，调试的时间就被加长了，相应的three.js的作者写了这个调试工具，方便three.js中调试。dat.GUI它是一个轻量级的 JavaScript 控制器库，它使我们可以轻松地即时操作变量和触发函数，我们可以通过设定好的控制器去快捷的修改设定的变量。

实现效果

安装

npm install --save dat.gui

引入

import * as dat from 'dat.gui'

创建实例

const gui = new dat.GUI();

往面板添加内容

mesh对象在各轴上的位置、gui能调整的最大最小值，以及精度。
各参数分别为：(属性，属性值，最小值，最大值，精度)。

// 往GUI面板添加要显示的对象的参数

gui.add(mesh.position, 'y', -3, 3, 0.01);

//另一种写法，等价于上面
gui
  .add(mesh.position, 'y')
  .min(-3)
  .max(3)
  .step(0.01)
  .name("elevation")

属性为Boolean时

传入一个对象，对象中的键的值的类型决定调试工具的形式。
比如：值是一个boolean值，对应的调试工具就展现一个复选框，该展现值的状态。

// mesh对象的可见性
gui.add(mesh, "visible");
// mesh对象的材料是否渲染为线框
gui.add(material, "wireframe");

值为函数时

如果值是一个函数，对应就是一个按钮，点击按钮触发这个函数。

const parameters = {
    spin: () => {
        // console.log("spin");
        // 点击spin按钮，给mesh对象添加旋转等动画
        gsap.to(mesh.rotation, { duration: 1, y: mesh.rotation.y + 10 });
    },
};
gui.add(parameters, "spin");

改变颜色

重新声明一个变量然后里面用来存放各类参数，然后将材质颜色设置为该变量对象里的颜色属性值；通过onChange()监听颜色变化事件，再通过material.color.set()将材质颜色设置为该颜色。

更改物体材质颜色

const parameters = {
    color: "#e14fa5",
};
const material = new THREE.MeshBasicMaterial({ color: parameters.color });

gui.addColor(parameters, "color").onChange(() => {
    // console.log("tweak did change");
    material.color.set(parameters.color);
});