three.js 图形用户界面工具GUI
时间:2022-07-24
本文章向大家介绍three.js 图形用户界面工具GUI,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
今天郭先生来说一说three.js的一个图形用户界面工具gui,如下图,在线案例点击three.js-GUI。
1. 引入GUI,构造函数
按照所需,引入的方式也不相同。
//通过script标签引入
<script src="../libs/dat.gui.js"></script>
var gui = new dat.GUI();
//通过npm引入
import { GUI } from "three/examples/jsm/libs/dat.gui.module";
var gui = new GUI();
2. 创建参数对象
var params = new function() {
this.color = 0x00ff00; //颜色
this.length = 10; //几何体的大小
this.size = 0.3; //粒子大小
this.state = 'sphere'; //默认几何体
this.states = ['sphere', 'cube']; //几何体种类
this.visible = true; //是否显示几何体
};
3. Model和View的交互
首先说说gui的一些方法
方法 |
介绍 |
---|---|
add |
添加一个表单组件,参数依次为(对象,属性,最小值,最大值) |
addColor |
添加一个颜色选择面板,参数依次为(对象,属性) |
addFolder |
添加一个栏目,参数为栏目的名称,该函数返回一个对象,这个对象仍然可以使用add()、addColor()、addFolder()方法 |
gui组件有单选框,滑块,下拉列表等,渲染那种组件取决于params的参数,下面是代码示例
gui.addColor(params, "color").onChange(e => { //点击颜色面板,e为返回的10进制颜色
pointsMaterial.color.set(e);
});
gui.add(params, "length", 8, 30).onChange(e => { //该滑块的值域是[8,30],e为返回的滑块值
if(params.state == 'sphere') {
objGeometry = new THREE.SphereGeometry(e, 30, 18);
} else {
objGeometry = new THREE.BoxGeometry(params.length * 1.5, params.length * 1.5, params.length * 1.5, 10, 10, 10);
}
points.geometry.vertices = objGeometry.vertices;
points.geometry.verticesNeedUpdate = true;
})
gui.add(params, "size", 0.1, 1).onChange(e => { //同上
pointsMaterial.size = e
});
gui.add(params, "state").options(params.states).onChange( e => { //这是一个下拉列表,state是默认值,列表项通过options设置,params.states为列表数组,e返回所选的列表项。
scene.remove(scene.getObjectByName('points'));
if(e == 'sphere') {
objGeometry = new THREE.SphereGeometry(params.length, 30, 18);
} else {
objGeometry = new THREE.BoxGeometry(params.length * 1.5, params.length * 1.5, params.length * 1.5, 10, 10, 10);
}
geometry = new THREE.Geometry();
geometry.vertices = objGeometry.vertices;
points = new THREE.Points(geometry, pointsMaterial);
points.name = 'points';
scene.add(points);
})
gui.add(params, 'visible').onChange(e => { //这是一个单选框,因为params.visible是一个布尔值,e返回所选布尔值
points.visible = e;
})
gui就说到这里。
转载请注明地址:郭先生的博客
- 100行Python代码实现自动抢火车票
- Python交互式数据分析报告框架:Dash
- PyQt5 GUI应用程序工具包入门(2)
- 用Python研究了三千套房子,告诉你究竟是什么抬高了房价?
- 设计模式之装饰模式
- Android网络编程(六)OkHttp3用法全解析
- Android网络编程(五)OkHttp用法全解析
- Android网络编程(一)HTTP协议原理
- Spring Cloud实战小贴士:Zuul统一异常处理(二)
- Android View体系(九)自定义View
- Android网络编程(二)HttpClient与HttpURLConnection
- Spring Batch入门篇
- Android网络编程(三)Volley用法全解析
- Android网络编程(八)源码解析OkHttp中篇[复用连接池]
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 用Python模拟登陆GitHub并获取信息
- APUE学习手札 编写一个与3.12节中dup2功能相同的函数,要求不调用fcntl函数,并且要有正确的出错处理
- Python教程 | 最标准的地图调用方式(国家测绘局提供数据)
- Python数据可视化:Python大佬有哪些?
- 新手一看就懂的线程池
- 「面试」破(B)站之旅
- 想过为你的应用加上skywalking(链路监控)吗?
- 结合注意力机制的UNet降水短临预报框架
- 用Python全自动下载抖音视频!
- 如何实现一个高效的启发式算法?
- Python数据可视化:豆瓣电影TOP250
- 容器化 FRP 使用方案
- 任意图像转素描:Python分分钟实现
- Python数据科学:相关分析
- Python数据科学:正态分布与t检验