1. 引入方式:
//通过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. 主要方法
方法 | 介绍 |
---|---|
add | 添加一个表单组件,参数依次为(对象,属性,最小值,最大值) |
addColor | 添加一个颜色选择面板,参数依次为(对象,属性) |
addFolder | 添加一个栏目,参数为栏目的名称,该函数返回一个对象,这个对象仍然可以使用add()、addColor()、addFolder()方法 |
3. 示例
创建一个变量存储参数
var params = new function() {
this.color = 0x00ff00; //颜色
this.size = 1; //粒子大小
};
1)创建颜色选择面板
gui.addColor(params, "color").onChange(e => { //点击颜色面板,e为返回的10进制颜色
console.log("color changed. ",e);
cube.material.color.set(e);
});
其中onchange就是改变值的回调函数定义。
效果
2)创建尺寸大小选择项
gui.add(params, "size").onChange(e => { //点击颜色面板,e为返回的10进制颜色
console.log("size changed. ",e);
cube.scale.set(e,e,e);
});
效果
改变size值,立方体大小会随之改变
3)创建形状的options选项
设置参数
var params = new function() {
this.color = 0x00ff00; //颜色
this.size = 1; //大小
this.map = 'amp'; //默认贴图
this.maps = ['amp', 'book','man']; //贴图选项
this.gem='box';
this.gems=['box','ball','cylinder','tetrahedron']; // 形状选项
};
添加菜单
gui.add(params,"gem").options(params.gems).onChange(e=>{
if(e=="box"){cube.geometry=new THREE.BoxGeometry(100, 100, 100);cube.geometry.needsUpdate = true;}
if(e=="ball"){cube.geometry=new THREE.SphereGeometry(100, 32, 16);cube.geometry.needsUpdate = true;}
if(e=="cylinder"){cube.geometry=new THREE.CylinderGeometry(100, 100,100, 8);cube.geometry.needsUpdate = true;}
if(e=="tetrahedron"){cube.geometry=new THREE.TetrahedronGeometry(100, 0);cube.geometry.needsUpdate = true;}
});