three.js GUI用法

helloyangkl

已于 2022-02-25 17:14:25 修改

阅读量2.6k

点赞数

文章标签： javascript three.js

于 2022-02-09 12:00:19 首次发布

本文链接：https://blog.csdn.net/helloyangkl/article/details/122827458

版权

dat.GUI 交互界面 3D场景控制参数颜色设置

关键词由CSDN通过智能技术生成

方式一：

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