前言：没有系统说过这个GUI,下面我们来系统看一下这块吧
gui.js
一个前端库，借助dat.gui可以快速创建控制三维场景的UI交互页面
使用
// 引入dat.gui.js的一个类GUI
import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
// 实例化一个gui对象
const gui = new GUI();
我们可以发现在右上角有个交互页面
属性
-
.domElement可以获取到gui界面的html元素，下面的就不多赘述，可以自定义样式 -
add()添加一些我们可以操作的选项（操作属性值，基本都是可以的）gui.add(camera.position, 'x', - 10, 10, 0.01); gui.add(camera.position, 'y', - 10, 10, 0.01); gui.add(camera.position, 'z', - 10, 10, 0.01);效果（我们发现可以操作相机）
-
.name(),我们可以自定义名称gui.add(camera.position, 'x', - 10, 10, 0.01).name('相机x'); gui.add(camera.position, 'y', - 10, 10, 0.01).name('相机y'); gui.add(camera.position, 'z', - 10, 10, 0.01).name('相机z'); -
.step(),设置变化属性值间隔是多少 -
.onChange(),改变值时触发 -
.addColor(),颜色值改变
下拉菜单、单选框、分组
.add()参数3可以是数字（这种情况是参数3，4都为数字），或者数组(单选框)，或者对象（单选框）
数组效果
分组
文档中有一个demo
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);
按钮，点击事件
// 创建一个函数，供按钮点击时调用
function onClickFunction() {
console.log('开始环绕运动');
// 在这里添加你想要执行的代码
}
// 创建一个包含按钮的对象
const guiControls = {
clickButton: function () {
onClickFunction();
}
};
// 将按钮添加到 GUI 中
gui.add(guiControls, 'clickButton').name('环绕运动');
效果
GUI的实际案例后续补充
性能监测工具
...
//引入性能监视器stats.js
import Stats from 'three/addons/libs/stats.module.js';
...
//创建stats对象
const stats = new Stats();
//stats.domElement:web页面上输出计算结果,一个div元素，
document.body.appendChild(stats.domElement);
// 渲染函数
function render() {
//requestAnimationFrame循环调用的函数中调用方法update(),来刷新时间
stats.update();
renderer.render(scene, camera); //执行渲染操作
requestAnimationFrame(render); //请求再次执行渲染函数render，渲染下一帧
}
render();
效果
