19. gui调试界面2

2024-06-04 17:32| 来源: 网络整理| 查看: 265

# 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); });

【本文地址】

公司简介

联系我们

今日新闻

推荐新闻

专题文章