Three.js教程：gui调试界面2

最新推荐文章于 2025-06-05 15:56:13 发布

ygtu2018

最新推荐文章于 2025-06-05 15:56:13 发布

阅读量342

点赞数

CC 4.0 BY-SA版权

文章标签： javascript 数学建模开发语言 three.js

本文链接：https://blog.youkuaiyun.com/ygtu2018/article/details/131409968

文章介绍了如何利用GUI.js库与threejs结合，通过.name()方法定制交互界面显示内容，使用.step()方法设定属性值变化步长，以及.onChange()方法响应值变化并执行相应代码。同时提到了.addColor()方法用于处理颜色值的交互调整，帮助提升3D建模学习工作室的效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

推荐：将 NSDT场景编辑器 加入你的3D工具链

其他系列工具： NSDT简石数字孪生

gui调试界面2-颜色命名等

本节课结合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);
});

3D建模学习工作室

上一篇：Three.js教程：gui.js库(可视化改变三维场景) (mvrlink.com)

下一篇：Three.js教程：gui调试3-下拉菜单、单选框 (mvrlink.com)