参考资料：threejs中文网
threejs qq交流群：814702116
gui.js库(可视化改变three.js三维场景参数)
dat.gui.js说白了就是一个前端js库，对HTML、CSS和JavaScript进行了封装，学习开发的时候，借助dat.gui.js可以快速创建控制三维场景的UI交互界面，你打开课件中案例源码体验一下就能感受到。
课程学习dat.gui.js也不仅仅是为了学习dat.gui.js，也是建立一种思想，就是threejs三维空间的很多参数，不是心算出来的，往往需要可视化的方式调试出来。
引入dat.gui.js
gihtub地址：https://github.com/dataarts/dat.gui
npm地址：https://www.npmjs.com/package/dat.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对象
创建一个GUI对象，你可以看到浏览器右上角多了一个交互界面，GUI本质上就是一个前端js库。
// 实例化一个gui对象
const gui = new GUI();
.domElement：改变GUI界面默认的style属性
通过.domElement属性可以获取gui界面的HTML元素，那就意味着你可以改变默认的style样式，比如位置、宽度等。
//改变交互界面style属性
gui.domElement.style.right = '0px';
gui.domElement.style.width = '300px';
.add()方法
执行gui的.add()方法可以快速创建一个UI交互界面，比如一个拖动条，可以用来改变一个JavaScript对象属性的属性值。
格式：.add(控制对象，对象具体属性，其他参数)
其他参数，可以一个或多个，数据类型也可以不同，gui会自动根据参数形式，自动生成对应的交互界面。
参数3和参数4，分别是一个数字，交互界面是一个鼠标可以拖动的拖动条，可以在一个区间改变属性的值
执行gui.add(obj, 'x', 0, 100);你可以发现右上角gui界面增加了新的内容，可以控制obj对象x属性的新交互界面。
//创建一个对象，对象属性的值可以被GUI库创建的交互界面改变
const obj = {
x: 30,
};
// gui增加交互界面，用来改变obj对应属性
gui.add(obj, 'x', 0, 100);
体验.add()功能——改变对象属性值
为了方便观察.add()是如何改变JavaScript对象属性的，可以浏览器控制台不停地打印obj的值，这样通过gui界面拖动改变obj对象属性的的时候，便于观察obj的变化。
const obj = {x: 30};
setInterval(function () {
console.log('x', obj.x);
}, 10)
gui改变js对象多个属性
const obj = {
x: 30,
y: 60,
z: 300,
};
// gui界面上增加交互界面，改变obj对应属性
gui.add(obj, 'x', 0, 100);
gui.add(obj, 'y', 0, 50);
gui.add(obj, 'z', 0, 60);
gui改变threejs光照强度测试
three.js在调试场景渲染效果的时候，比如光照的强度，人大脑的CPU是没有能力通过光照参数算出来模型渲染效果的，一般来说你先大概给一个经验值，然后通过gui在这个大概值的基础上下浮动可视化调试。
光源对象具有一个光照强度属性.intensity，可以通过gui拖动条改变该属性。
// 光照强度属性.intensity
console.log('ambient.intensity',ambient.intensity);
// 通过GUI改变mesh.position对象的xyz属性
gui.add(ambient, 'intensity', 0, 2.0);
gui改变threejs模型位置测试
mesh.position是JavaScript对象，具有x、y、z属性,这三个属性分别表示模型的xyz坐标，这就是说，gui改变mesh.position的x、y、z属性，就可以可视化改变mesh的位置。
gui.add(mesh.position, 'x', 0, 180);
gui.add(mesh.position, 'y', 0, 180);
gui.add(mesh.position, 'z', 0, 180);
title: 19. gui调试界面2-颜色命名等
date: 2023-01-20 19:20:08
permalink: /pages/66ce2c/
gui.js库(颜色、命名、步长、事件)
本节课结合threejs，给大家介绍gui.js库更多的方法。
.name()方法
.add()创建的交互界面，会默认显示所改变属性的名字，为了通过交互界面更好理解你改变的某个对象属性，你可以通过.name()方法改变gui生成交互界面显示的内容。
const gui = new GUI();//创建GUI对象
gui.add(ambient, 'intensity', 0, 2.0).name('环境光强度');
gui.add(directionalLight, 'intensity', 0, 2.0).name('平行光强度');
步长.step()方法
步长.step()方法可以设置交互界面每次改变属性值间隔是多少。
gui.add(ambient, 'intensity', 0, 2.0).name('环境光强度').step(0.1);
.onChange()方法
当gui界面某个值的时候，.onChange()方法就会执行，这时候你可以根据需要通过.onChange()执行某些代码。
const obj = {
x: 30,
};
// 当obj的x属性变化的时候，就把此时obj.x的值value赋值给mesh的x坐标
gui.add(obj, 'x', 0, 180).onChange(function(value){
mesh.position.x = value;
// 你可以写任何你想跟着obj.x同步变化的代码
// 比如mesh.position.y = value;
});
.addColor()颜色值改变
.addColor()生成颜色值改变的交互界面
const obj = {
color:0x00ffff,
};
// .addColor()生成颜色值改变的交互界面
gui.addColor(obj, 'color').onChange(function(value){
mesh.material.color.set(value);
});
title: 20. gui调试3-下拉菜单、单选框
date: 2023-01-20 19:21:09
permalink: /pages/0569b5/
gui.js库(下拉菜单、单选框)
前面大家学过通过.add()方法可以添加一个拖动条用来改变对象的某个属性，本节课给大家介绍.add()方法创建新的UI交互界面，比如下拉菜单、单选框。
.add()方法参数3和4数据类型：数字
格式：add(控制对象，对象具体属性，其他参数)
其他参数，可以一个或多个，数据类型也可以不同，gui会自动根据参数形式，自动生成对应的交互界面。
参数3和参数4，分别是一个数字，交互界面是一个鼠标可以拖动的拖动条，可以在一个区间改变属性的值
// 参数3、参数4数据类型：数字(拖动条)
gui.add(obj, 'x', 0, 180).onChange(function (value) {
mesh.position.x = value;
});
.add()方法参数3数据类型：数组
参数3是一个数组，生成交互界面是下拉菜单
const obj = {
scale: 0,
};
// 参数3数据类型：数组(下拉菜单)
gui.add(obj, 'scale', [-100, 0, 100]).name('y坐标').onChange(function (value) {
mesh.position.y = value;
});
.add()方法参数3数据类型：对象
参数3是一个对象，生成交互界面是下拉菜单
const obj = {
scale: 0,
};
// 参数3数据类型：对象(下拉菜单)
gui.add(obj, 'scale', {
left: -100,
center: 0,
right: 100
// 左: -100,//可以用中文
// 中: 0,
// 右: 100
}).name('位置选择').onChange(function (value) {
mesh.position.x = value;
});
.add()方法对应属性的数据类型：布尔值
如果.add()改变属性的对应的数据类型如果是布尔值，那么交互界面就是一个单选框。
const obj = {
bool: false,
};
// 改变的obj属性数据类型是布尔值，交互界面是单选框
gui.add(obj, 'bool').name('是否旋转');
gui.add(obj, 'bool').onChange(function (value) {
// 点击单选框，控制台打印obj.bool变化
console.log('obj.bool',value);
});
.add()方法改变布尔值案例
控制一个对象是否旋转。
gui.add(obj, 'bool').name('旋转动画');
// 渲染循环
function render() {
// 当gui界面设置obj.bool为true,mesh执行旋转动画
if (obj.bool) mesh.rotateY(0.01);
renderer.render(scene, camera);
requestAnimationFrame(render);
}
render();
title: 21. gui.js库(分组)
date: 2023-01-20 19:22:17
permalink: /pages/2e1b8c/
gui.js库分组方法.addFolder()
当GUI交互界面需要控制的属性比较多的时候，为了避免混合，可以适当分组管理，这样更清晰。
gui交互界面不分组
gui交互界面不分组,只有一个默认的总的菜单。
const gui = new GUI(); //创建GUI对象
//创建一个对象，对象属性的值可以被GUI库创建的交互界面改变
const obj = {
color: 0x00ffff,// 材质颜色
specular: 0x111111,// 材质高光颜色
};
// 材质颜色color
gui.addColor(obj, 'color').onChange(function(value){
material.color.set(value);
});
// 材质高光颜色specular
gui.addColor(obj, 'specular').onChange(function(value){
material.specular.set(value);
});
// 环境光强度
gui.add(ambient, 'intensity',0,2);
// 平行光强度
gui.add(directionalLight, 'intensity',0,2);
// 平行光位置
gui.add(directionalLight.position, 'x',-400,400);
gui.add(directionalLight.position, 'y',-400,400);
gui.add(directionalLight.position, 'z',-400,400);
.addFolder()分组
new GUI()实例化一个gui对象，默认创建一个总的菜单，通过gui对象的.addFolder()方法可以创建一个子菜单，当你通过GUI控制的属性比较多的时候，可以使用.addFolder()进行分组。
.addFolder()返回的子文件夹对象，同样具有gui对象的.add()、.onChange()、.addColor()等等属性。
const gui = new GUI(); //创建GUI对象
const obj = {
color: 0x00ffff,// 材质颜色
};
// 创建材质子菜单
const matFolder = gui.addFolder('材质');
matFolder.close();
// 材质颜色color
matFolder.addColor(obj, 'color').onChange(function(value){
material.color.set(value);
});
// 材质高光颜色specular
matFolder.addColor(obj, 'specular').onChange(function(value){
material.specular.set(value);
});
// 环境光子菜单
const ambientFolder = gui.addFolder('环境光');
// 环境光强度
ambientFolder.add(ambient, 'intensity',0,2);
// 平行光强度
dirFolder.add(directionalLight, 'intensity',0,2);
// 平行光位置
dirFolder.add(directionalLight.position, 'x',-400,400);
dirFolder.add(directionalLight.position, 'y',-400,400);
dirFolder.add(directionalLight.position, 'z',-400,400);
关闭.close()和展开.open()交互界面
gui对象创建的总菜单或gui.addFolder()创建的子菜单都可以用代码控制交互界面关闭或开展状态。
const gui = new GUI(); //创建GUI对象
gui.close();//关闭菜单
// 创建材质子菜单
const matFolder = gui.addFolder('材质');
matFolder.close();//关闭菜单
.addFolder()套娃——子菜单嵌套子菜单
.addFolder()创建的对象，同样也具有.addFolder()属性，可以继续嵌套子菜单。
// 平行光子菜单
const dirFolder = gui.addFolder('平行光');
dirFolder.close();//关闭菜单
// 平行光强度
dirFolder.add(directionalLight, 'intensity',0,2);
const dirFolder2 = dirFolder.addFolder('位置');//子菜单的子菜单
dirFolder2.close();//关闭菜单
// 平行光位置
dirFolder2.add(directionalLight.position, 'x',-400,400);
dirFolder2.add(directionalLight.position, 'y',-400,400);
dirFolder2.add(directionalLight.position, 'z',-400,400);
扫一扫
138
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
