three.js调试工具dat.gui使用本文已参与「新人创作礼」活动，一起开启掘金创作之路。在three.js 观察

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

在three.js 观察物体变化不如网页方便往往一次不能达到我们想要的位置需要微调而每次加载模型还需要一些时间调试的时间就被加长了相应的three.js的作者写了这个调试工具方便three.js中调试。

安装

yarn add dat.gui

npm install --save dat.gui

导出

// CommonJS:
const dat = require('dat.gui');

// ES6:
import * as dat from 'dat.gui';

创建一个实例

const gui = new dat.GUI();

我更喜欢这样使用

import { GUI } from "dat.gui";

const gui = new GUI();

总之选择你喜欢的方式创建一个gui实例开启调试吧🎉

gui的工作方式

传入一个对象，对象中的键的值的类型决定调试工具的形式
比如值是一个boolean值对应的调试工具就展现一个复选框该展现值的状态
如果值是一个函数对应就是一个按钮点击按钮触发这个函数

以此来作为调试的格式接下来根据场景介绍常用的几种调试方式

修改物体的位置

物体的posiiton属性中的x,y,z决定位置

gui.add(mesh.position,'x')

把被修改的对象传进第一个参数被修改的属性名(字符串形式)作为第二个参数这样就是修改x轴坐标

gui.add(mesh.position,'x'，0,100) 后面两个参数是最小值和最大值

这是类型定义剩下的一个参数是一次变化多少针对位置的修改可以封装一个函数省的一行一行写

typescript

const positionkeys: ["x", "y", "z"] = ["x", "y", "z"];

export const guiPosiiton = (mesh: Object3D, range: number = 20, name?: string) => {
    const { name: meshName, type, uuid, position } = mesh;
    // 新建一个文件夹
    const fidld = gui.addFolder(name || meshName || type + uuid.substring(0, 5));

    for (const key of positionkeys) {
        fidld.add(position, key, position[key] - range, position[key] + range);
    }
};

javascript

const positionkeys = ["x", "y", "z"];

export const guiPosiiton = (mesh, range = 20, name) => {
    const { name: meshName, type, uuid, position } = mesh;
    // 新建一个文件夹
    const fidld = gui.addFolder(name || meshName || type + uuid.substring(0, 5));

    for (const key of positionkeys) {
        fidld.add(position, key, position[key] - range, position[key] + range);
    }
};

监听值的改变

gui.add({count:0},'count',-10,10).onChange(val => {
 xxx.xxx = val;
})

在onChange中获得当前的value

按钮

gui.add({fn:() =>  console.log(123) },'fn')

点击 fn 调用fn这个函数如果名字不想用属性名可以主动设置

gui.add({fn:() =>  console.log(123) },'fn').name('打印')

修改纹理颜色

const material = new MeshPhongMaterial();

const params = {
    color: 0xffffff
};

gui.addColor(params, "color").onChange((color) => {
    material.color = color;
});

模式选择 -- 选择器

const options = [1, 2, 3, 4];

gui.add({ 难度: 1 }, "难度")
    .options(options)
    .onChange((val) => {
        console.log("select", val);
    });

字符串修改

gui.add({ name: "hongbin" }, "name");

常用的大概就这几个后续会慢慢补充更多调试方式
大家可以根据环境灵活调整这个工具很有趣建议大家尝试