Three js 4 调试工具ui

文章目录

• • 安装和引入包
  • 使用
  • • 先定义GUI对象
    • 添加按钮
    • 添加滑块
    • [添加自定义折叠框 和 值变化事件](#添加自定义折叠框 和 值变化事件)
    • bool类型勾选框
    • 颜色选择框
    • 枚举选择

安装和引入包

安装包

npm i lil-gui

引入包

import GUI from "lil-gui";

使用

所有都是直接写在main.js下

先定义GUI对象

//定义一个gui对象
const gui = new GUI();

添加按钮

//定义一个对象，对象里有两个键值对， 值是两个匿名函数
let eventObj=
    {
        Fullscreen:function ()
        {
            //全屏
            document.body.requestFullscreen();
        },
        ExitFullscreen:function ()
        {
            document.exitFullscreen();
        }
    }
//添加按钮  会自动识别属性的值是不是函数，如果是，会自动创建按钮
gui.add(eventObj,"Fullscreen").name("全屏");//不写name会默认用事件名当name
gui.add(eventObj,"ExitFullscreen").name("退出全屏");

添加滑块

//添加滑块 控制立方体的位置  -5到5是滑块的范围
gui.add(cube.position,"x",-5,5).name("平滑设置立方体x轴位置");
//添加有固定步长的滑块
gui.add(cube.position,"x").min(-5).max(5).step(1).name("固定步长设置立方体的x轴位置");

添加自定义折叠框 和 值变化事件

let folder = gui.addFolder("固定步长设置位置")
folder.add(cube.position,"x").min(-5).max(5).step(1).name("固定步长设置立方体的x轴位置").onChange(v=>{console.log(v)});//值改变后立刻打印
folder.add(cube.position,"y").min(-5).max(5).step(1).name("固定步长设置立方体的y轴位置").onFinishChange(v=>{console.log(v)});//完成拖动后再打印
folder.add(cube.position,"z").min(-5).max(5).step(1).name("固定步长设置立方体的z轴位置");

bool类型勾选框

gui.add(material_red,"wireframe").name("父物体线框模式").setValue(false);//使用setvalue来设置默认值

wireframe是materal的一个属性，设置是否以线框模式显示

material_red.wireframe = true;

颜色选择框

//先定义一个颜色
let colorParams = 
    {
        cubeColor:"#0000ff"
    }
//将选择框加入gui
gui.addColor(colorParams,"cubeColor").name("立方体颜色").onChange(v=>
{
    cube.material.color.set(v);
});    

枚举选择

gui.add(THREE.ColorManagement, "workingColorSpace",  {
    Linear: THREE.LinearSRGBColorSpace,
    SRGB: THREE.SRGBColorSpace,
})
    .name("工作色彩空间")
    .onChange(() => {
        material.needsUpdate = true;
    });