three.js调试工具dat.gui使用

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

github仓库

API文档

安装

yarn add dat.gui
1

or

npm install --save dat.gui
1

导出

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

// ES6:
import * as dat from 'dat.gui';
1
2
3
4
5

创建一个实例

const gui = new dat.GUI();
1

我更喜欢这样使用

import { GUI } from "dat.gui";

const gui = new GUI();
1
2
3

总之选择你喜欢的方式创建一个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);
    }
};
1
2
3
4
5
6
7
8
9
10
11

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);
    }
};
1
2
3
4
5
6
7
8
9
10
11

监听值的改变

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

在onChange中获得当前的value

按钮

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

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

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

修改纹理颜色

const material = new MeshPhongMaterial();

const params = {
    color: 0xffffff
};

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

1
2
3
4
5
6
7
8
9
10

模式选择 – 选择器

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

gui.add({ 难度: 1 }, "难度")
    .options(options)
    .onChange((val) => {
        console.log("select", val);
    });
1
2
3
4
5
6
7

字符串修改

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

常用的大概就这几个后续会慢慢补充更多调试方式

大家可以根据环境灵活调整 这个工具很有趣 建议大家尝试