Three.js 入门(GUI可视化改变三维场景)

本篇主要学习内容 :

1. 认识gui.js库(可视化改变三维场景)
2. 体验gui快速创建控制三维场景的UI交互界面
3. gui调试页面多种方式

点赞 + 关注 + 收藏 = 学会了

1.认识gui.js库(可视化改变三维场景)

dat.gui.js是一个前端js库，对HTML、CSS和JavaScript进行了封装，学习开发的时候，借助dat.gui.js可以快速创建控制三维场景的UI交互界面

// 导入lil.gui
import { GUI } from 'three/examples/jsm/libs/lil-gui.module.min.js'

2.体验gui快速创建控制三维场景的UI交互界面

// 实例化一个gui对象
const gui = new GUI();
//lil gui 调试开发3d效果
let eventObj = {
    Fullscreen: () => {
        document.body.requestFullscreen()
    },
    ExitFullscreen: () => {
        document.exitFullscreen()
    },
}
// 创建GUI   （用gui替代上一节点击事件）
const gui = new GUI()
gui.add(eventObj, 'Fullscreen').name('全屏')
gui.add(eventObj, 'ExitFullscreen').name('退出全屏')

3. 使用gui调试页面

像下面这样，可以进行分组，点击、单选、拖拽选取值、颜色调整

// 控制立方体位置
let folder = gui.addFolder('立方体位置') //生成文件夹  添加分组
// gui.add(cube.position, 'x', -5, 5).name('立方体x轴位置')//没有大小限制有小数点
folder
    .add(cube.position, 'x')
    .min(-10)
    .max(10)
    .step(1)
    .name('立方体x轴位置')
    .onChange((val) => {
        console.log(val, '立方体位置')
    })
folder
    .add(cube.position, 'y')
    .min(-10)
    .max(10)
    .step(1)
    .name('立方体y轴位置')
    .onFinishChange((val) => {
        console.log(val, '立方体位置')
    })
folder.add(cube.position, 'z').min(-10).max(10).step(1).name('立方体z轴位置')
gui.add(parMaterial, 'wireframe').name('父元素线框模式')

let colorParams = {
    cubeColor: '0xff0000',
}
gui.addColor(colorParams, 'cubeColor')
    .name('立方体颜色')
    .onChange((val) => {
        cube.material.color.set(val)
    })

 感谢：b站up主：老陈打码 以及 threejs中文网 教学及参考文档
到此基础入门（三）学习告一段落，道阻且长，行则将至。与诸君共勉。       ⭐️