今天郭先生来说一说three.js的一个图形用户界面工具gui，如下图，在线案例点击three.js-GUI。
1. 引入GUI,构造函数
按照所需，引入的方式也不相同。
代码语言：javascript复制//通过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. 创建参数对象
代码语言：javascript复制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的参数，下面是代码示例
代码语言：javascript复制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就说到这里。
转载请注明地址：郭先生的博客
