three.js debugging tool dat.gui use

在three.js Easy observation object changes as web page Often a can't reached the position that we want to 需要微调 And each load model still needs some time Debugging time is longer 相应的three.jsThe author wrote this debugging tool 方便three.js中调试.

github仓库

API文档

安装

yarn add dat.gui

or

npm install --save dat.gui

导出

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

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

创建一个实例

const gui = new dat.GUI();

I prefer to use

import {
     GUI } from "dat.gui";

const gui = new GUI();

All in all select the way you like to create aguiOpen debugging

gui的工作方式

传入一个对象,The object of the values of type determining forms of the debugging tools
比如 值是一个boolean值 The corresponding debugging tools will show a check box The present value of state

如果 值是一个函数 Corresponding is a button Click on the button to trigger the function

In order to as debugging format 接下来 According to the scene to introduce several debug mode

Modify the position of the object

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

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

The modified object transfer into the first parameter The modified attribute name(字符串形式)作为第二个参数 That is correctx轴坐标

gui.add(mesh.position,'x',0,100)
Behind the two parameters is minimum and maximum

这是类型定义 The rest of the a parameter is how much a change
In view of the location change can encapsulate a function Province line to write

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这个函数 Don't want to use the property name if the name can be set active

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

Modify texture color

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");

Commonly used is probably this several follow-up will slowly add more debugging method

Everyone can be adjusted according to the environment This tool is very interesting 建议大家尝试