Three.js - 图形界面工具（lil-gui）（四）

lil-gui

开始使用

本节使用的代码是在上一节的基础上修改。
lil-gui常用的方法：

.add() 将控制器添加到GUI，使用typeof运算符推断控制器类型。
.addColor() 将颜色控制器添加到GUI。
.addFolder() 以层级的形式创建一个新的GUI。

简单示例

使用非常简单，引入控件。实例化GUI后，通过.add()传入要修改的对象，和对象中要修改的属性名。
它能自动生成对应的界面组件，修改界面组件的值，实时同步到对象中。

import { GUI } from 'https://threejsfundamentals.org/threejs/../3rdparty/dat.gui.module.js'const obj = {myBoolean: true,myString: 'lil-gui',myNumber: 1,myFunction: function () {alert('hi')}
}
const gui = new GUI()
gui.add(obj, 'myBoolean') // 单选
gui.add(obj, 'myString') // 文本
gui.add(obj, 'myNumber') // 数字
gui.add(obj, 'myFunction') // 按钮

正式使用

在上一节中我们的辅助相机是固定，下面我们就来通过界面组件来修改辅助相机。
修改相机矩阵属性。这里使用.onChange()在值修改后调用回调函数，因为相机矩阵修改需要调用.updateProjectionMatrix()才会生效。

    import { GUI } from 'https://threejsfundamentals.org/threejs/../3rdparty/dat.gui.module.js'...// 辅助相机...function updateCamera() {camera1.updateProjectionMatrix()}const gui = new GUI()gui.add(camera1, 'fov', 1, 180).onChange(updateCamera)gui.add(camera1, 'near', 1, 200).onChange(updateCamera)gui.add(camera1, 'far', 1, 200).onChange(updateCamera)...

修改全局相机位置。.position是一个Vector3()不能直接传入。我们需要自定义一个对象来操作他。

      class PositionGUI {constructor(obj, name) {this.obj = objthis.name = name}get modify() {return this.obj[this.name]}set modify(v) {this.obj[this.name] = v}}const folder = gui.addFolder('全局Position')folder.add(new PositionGUI(camera.position, 'x'), 'modify', 0, 200).name('x')folder.add(new PositionGUI(camera.position, 'y'), 'modify', 0, 200).name('y')folder.add(new PositionGUI(camera.position, 'z'), 'modify', 0, 200).name('z')

创建一个新对象，修改属性的get、set方法。在方法中我们就可以修改其他对象来完成操作。

总结

上面只是把常用的方式简单做了简述，详细的需要在官网中去了解。在three.js的社区中，有很多好用的控件不需要你全部理解，只需要知道有什么控件，是做什么用的。在以后的开发中会减轻很多工作量。

Three.js - 图形界面工具（lil-gui）（四）相关推荐

JDK 内置图形界面工具：海阔凭鱼跃，天高任鸟飞
GUI 图形界面工具,主要是 3 款:JConsole.JVisualVM.JMC.其实这三个产品可以说是 3 代不同的 JVM 分析工具. 这三个工具都支持我们分析本地 JVM 进程,或者通过 JM ...
swing开发图形界面工具配置（可自由拖控件上去）
swing开发图形界面工具,eclipse swing图形化操作界面工具配置 1.有一个小功能要有一个界面,之前知道有一个图形化界面的(就是可以往上面拖控件布局的工具)JBuilder,今天上午就下 ...
ssh开启图形界面_分享|3 个 Linux 上的 SSH 图形界面工具
了解一下这三个用于 Linux 上的 SSH 图形界面工具. 在你担任 Linux 管理员的职业生涯中,你会使用 Secure Shell(SSH)远程连接到 Linux 服务器或桌面.可能你曾经在某 ...
mybatis-generator-gui 一款 mybatis generator 的图形界面工具
mybatis-generator-gui 一款 mybatis generator 的图形界面工具一.创建 MySQL 数据库,创建 2 两个表: 之前介绍过多次命令行创建数据库表了,查看 MyS ...
数据库、数据库管理系统、SQL和图形界面工具的关系
写在前面:博主是一只经过实战开发历练后投身培训事业的"小山猪",昵称取自动画片<狮子王>中的"彭彭",总是以乐观.积极的心态对待周边的事物.本人的技 ...
Oracle（3）——Oracle图形界面工具创建数据库
具体操作步骤详情: 1.图形界面工具首界面 Database Configuration Assistant 点击下一步 2.默认点击下一步 3.默认点击下一步 4.设置全局数据库名.SID 为新 ...
如何从光盘本地安装CentOS 7图形界面（Gnome GUI）
本例中通过在CentOS 7中修改repo文件,直接从光盘或者ISO镜像文件安装Gnome图形界面(Gnome GUI),从而避免耗时从官网或镜像下载. 1.首先确保光盘或者ISO镜像文件正确连接到客 ...
SQL server数据库的操作步骤·图形界面工具
简介:一个SQL server数据库至少包括主数据文件和事务日志文件即以.mdf ..ldf为扩展名的数据文件和日志文件.在SQL server系统中,通常有两种方式创建数据库:一种是使用图形界面工具 ...
代码管理工具GIT之图形界面工具TortoiseGit
一.程序员为什么要学习和使用GIT呢? 1.当一个项目需要由众多开发人员协同开发时,很难保证相互的代码之间不发生冲突.使用git,可以良好的进行模块代码合并,从而组成一个项目.非常适合团队进行敏捷开 ...

Three.js - 图形界面工具（lil-gui）（四）

lil-gui

开始使用

简单示例

正式使用

总结

Three.js - 图形界面工具（lil-gui）（四）相关推荐

最新文章

热门文章