three.js加入简单的GUI菜单

Posted 2022-04-04 海里的鱼2022

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;
	);