方式一:

1.勾选-bool

//GUI交互控制
var controls = new function () {this.无障碍 = true	};
//可视化界面GUI对象,添加控制属性
folder.add(controls, '无障碍');

2.拉动条

//GUI交互控制
var controls = new function () {
				this.跳起高度 = 200;
				this.MoveSpeed = 500;
				this.无障碍 = true;
				};
//可视化界面GUI对象,添加控制对象的属性
			var gui = new dat.GUI();
			folder.add(controls, '跳起高度', 0, 500);
			folder.add(controls, 'MoveSpeed', 0, 1000);

3.分组folder 、按钮 

//GUI交互控制
			var controls = new function () {
				this.开始漫游 = function () { firstpersonroaming() };
				this.跳起高度 = 200;
				this.MoveSpeed = 500;
				this.无障碍 = true;
				this.结束漫游 = function () { unfirstpersonroaming() };
				};
//可视化界面GUI对象,添加控制对象的速度属性
			var gui = new dat.GUI();
			var folder = gui.addFolder('漫游');
			folder.add(controls, '开始漫游');
			folder.add(controls, '结束漫游');
			folder.add(controls, '跳起高度', 0, 500);
			folder.add(controls, 'MoveSpeed', 0, 1000);
			folder.add(controls, '无障碍');

4.下拉表

 

//可视化界面GUI对象,添加控制对象的速度属性
			var gui = new dat.GUI();
			var folder = gui.addFolder('漫游');
			//选项
			var stats = ['开始漫游', '结束漫游', '跳起高度', 'MoveSpeed','无障碍'];
			// 默认值设置
			var dropdown = { state: '开始漫游'};
			// 添加
			var clipCtrl = folder.add(dropdown, 'state').options(stats);
			// 设置点击事件
			clipCtrl.onChange(function () {
				alert("使用说明");
			});

5.设置颜色、 关联函数

gui.addColor().onChange(function(e){ ....e});

var controls=new function(){
				this.ambiColor=0x000000;
				this.disAbleSpotLight=true;
			};
			var gui=new dat.GUI();
			gui.addColor(controls,'ambiColor').onChange(function(e){ambientLight.color=new THREE.Color(e);});//GUI颜色交互
			gui.add(controls,'disAbleSpotLight').onChange(function(e){spotLight.visible=e;});

 

Logo

北京人形旗下天工造物具身智能开源社区,聚焦具身天工与慧思开物两大平台

更多推荐