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就说到这里，希望大家灵活运用。

转载请注明地址：郭先生的博客