【three.js】gui.js库(可视化改变三维场景)

目录

一、gui初体验

二、gui其它属性

2.1 name()方法

2.2 step()方法

2.3 onChange()方法

2.4 addColor()方法

三、下拉菜单、单选框

3.1 参数为数组

3.2 参数为对象

3.3 参数为布尔值

---

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

一、gui初体验

你可以通过npm或github方式获得dat.gui.js库，当然为了学习方便，threejs官方案例扩展库中也提供了gui.js，你可以直接使用。

// 引入dat.gui.js的一个类GUI
import { GUI } from 'three/addons/libs/lil-gui.module.min.js';

// 实例化一个gui对象
const gui = new GUI();
//改变交互界面style属性
gui.domElement.style.right = '0px';
gui.domElement.style.width = '300px';
// 通过gui可以与物体的位置进行交互，范围是0-180
gui.add(mesh.position, 'x', 0, 180);
gui.add(mesh.position, 'y', 0, 180);
gui.add(mesh.position, 'z', 0, 180);