ThreeJs学习笔记--GUI(可视化三维改变场景)

引入gui

javascript 复制代码
import { GUI } from "three/examples/jsm/libs/lil-gui.module.min.js";//具体的看自己本地threejs目录

创建gui(实例化gui)

javascript 复制代码
// 实例化一个gui对象
const gui = new GUI();
//改变/设置gui操作界面style属性
gui.domElement.style.right = "0px";
gui.domElement.style.width = "300px";

gui的.add方法

执行gui.add方法可以快速的创建一个交互页面(可以理解为配置出一个交互选项)创建成功后会在gui交互dom上多出对应的选项。格式是.add(控制对象,对象具体属性,其它参数),这个其它参数是可选而且是可以多个或单个的。

举个例子

javascript 复制代码
// 光照强度属性.intensity
console.log('pointLight.intensity',pointLight.intensity);
// 通过GUI改变mesh.position对象的xyz属性
gui.add(pointLight, 'intensity', 5000,10000);

通过操作右上角的部分,可以修改光照强度,可以看得到光照强度的变化

javascript 复制代码
gui.add(mesh.position, 'x', 0, 180);
gui.add(mesh.position, 'y', 0, 180);
gui.add(mesh.position, 'z', 0, 180);

可以可视化的修改物体的位置

gui.add的name方法

可以看到控制台属性名称变成了自定义的

gui.add的step

设置步长,就是修改属性的数值间隔,可以看的出现在的数值只能修改100的倍数

.onChange()方法

监听属性变化,当属性变化的时候可以执行某些操作

.addColor修改颜色,可以配合onChange实用

javascript 复制代码
const obj = {
  color: 0x00ffff,
};
// .addColor()生成颜色值改变的交互界面
gui.addColor(obj, "color").onChange(function (value) {
  mesh.material.color.set(value);
});

gui控制器,下拉模式

实用add+obj/arr+onChange配合就会可以出现下拉控制模式

javascript 复制代码
//数组
let obj ={
    scale:0
}
gui.add(obj,'scale',[-100,0,100]).onChange(function(val){
    mesh.position.x = val;
})

//对象

let obj ={
    scale: 0,
}

gui.add(obj,'scale'{left: -100,center: 0,right: 100}).onChange(function(val){
    mesh.position.x = val;
})

如果第三个参数是布尔值的话,就会出现单选模式

javascript 复制代码
let a = 0.1;
// 添加旋转速度控制
gui.add(guiControls, "rotationSpeed", 0, 1).onChange(function (value) {
  a = value;
});

let isRotate = {
  bool: false,
};
// 添加旋转开关
gui.add(isRotate, "bool").name("旋转");

function animate() {
  if (isRotate.bool) mesh.rotateY(a);
  controls.update(); // 更新控制器
  stats.setMode(1);
  renderer.render(scene, camera); // 渲染场景
  requestAnimationFrame(animate);
}

这样就可以做一个简易的操作联动,设置旋转速度和是否打开旋转

gui分组

gui可以使用.addFolder()来创建一个分组,当页面上需要操作的物品或者环境过多的时候,可以使用分组来分类

javascript 复制代码
const gui = new GUI(); //创建GUI对象
const obj = {
  color: 0x00ffff, // 材质颜色
  specular: 0x000000, // 高光颜色
};
// 创建材质子菜单
const matFolder = gui.addFolder("材质");
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);
const pointLightFolder = gui.addFolder("点光源");
// 点光源强度
pointLightFolder.add(pointLight, "intensity", 0, 10000);
// 点光源位置
pointLightFolder.add(pointLight.position, "x", -400, 400);
pointLightFolder.add(pointLight.position, "y", -400, 400);
pointLightFolder.add(pointLight.position, "z", -400, 400);

默认分组都是打开的,可以通过.close或者.open()来设置下拉选项是否展开

javascript 复制代码
const gui = new GUI()
gui.open()
// 创建材质子菜单
const matFolder = gui.addFolder('材质');
matFolder.close();//关闭菜单

.addFolder可以实现嵌套,也就是套娃,可以在子菜单里在加子菜单

javascript 复制代码
const gui = new GUI()
gui.open()
// 创建材质子菜单
const matFolder = gui.addFolder('材质');
matFolder.close();//关闭菜单
//创建材质子菜单的子菜单

const sonMatFolder = matFolder.addFolder('颜色')
相关推荐
CXDNW2 分钟前
【网络面试篇】HTTP(2)(笔记)——http、https、http1.1、http2.0
网络·笔记·http·面试·https·http2.0
使者大牙3 分钟前
【大语言模型学习笔记】第一篇:LLM大规模语言模型介绍
笔记·学习·语言模型
ssf-yasuo16 分钟前
SPIRE: Semantic Prompt-Driven Image Restoration 论文阅读笔记
论文阅读·笔记·prompt
As977_25 分钟前
前端学习Day12 CSS盒子的定位(相对定位篇“附练习”)
前端·css·学习
ajsbxi28 分钟前
苍穹外卖学习记录
java·笔记·后端·学习·nginx·spring·servlet
Rattenking29 分钟前
React 源码学习01 ---- React.Children.map 的实现与应用
javascript·学习·react.js
TeYiToKu1 小时前
笔记整理—linux驱动开发部分(9)framebuffer驱动框架
linux·c语言·arm开发·驱动开发·笔记·嵌入式硬件·arm
dsywws1 小时前
Linux学习笔记之时间日期和查找和解压缩指令
linux·笔记·学习
道法自然04021 小时前
Ethernet 系列(8)-- 基础学习::ARP
网络·学习·智能路由器
爱吃生蚝的于勒1 小时前
深入学习指针(5)!!!!!!!!!!!!!!!
c语言·开发语言·数据结构·学习·计算机网络·算法