threejs:vue里dat GUI的简单用法

1、引入datGUI

datGUI并不是threejs自带的，需要自己另外下载。

2、定义datGUI的控制器和添加到控制器里的对象

3、对以上两个变量进行初始化

CtrlObj是一个对象类型，那么要记得，对象类型的数据由key和value组成，如果key比较少，可以写成上图的形式，如果key比较多，建议用.keyname的形式，如下图，0.01就是key的默认值。

 4、添加控制器对象到控制器

引号里的名字必须跟对象的key一致，后面的两个数据是设置最大值和最小值。

 5、实现datGUI里的数据变化

进行了以上4步，我们可以右上角已经出现控制器了，接下来我们来实现控制器的操作，比如我们拖动rotationSpeed，改变旋转速度，几何体的速度为什么就会变化了？

其实是animate方法里，让几何体的旋转等于控制器对象rotationSpeed这个key的value。

  6、控制器对象的属性除了可以为数值外，还可以为很多其他类型，甚至可以为一个方法。

 7、添加颜色选择器

只需要在datGUI初始化里添加即可，不需要在动画方法里加

 

 

 完整代码如下：

<template>
	<div>
		<!-- 本案例演示添加datGUI插件 -->
		<div id="container"></div>
	</div>

</template>

<script>
	import * as THREE from 'three'
	// 注意OrbitControls要加{}，注意路径是jsm
	import {
		OrbitControls
	} from 'three/examples/jsm/controls/OrbitControls.js'
	// dat gui这个插件，是另外自己下载的，threejs的安装包里没有这个
	// dat gui组件能够方便地改变某些值，并快速预览这些值的改变所产生的变化
	import {
		dat
	} from 'three/examples/jsm/controls/dat.gui.js'

	export default {
		name: "hello",
		props: {

		},
		components: {

		},
		data() {
			return {
				scene: null,
				renderer: null,
				camera: null,
				mesh: null,
				orbitControls: null,
				// 几何体的参数
				radius: 5,
				widthSegments: 14,
				heightSegments: 6,
				phiStart: 2,
				phiLength: 6.3,
				thetaStart: 0,
				thetaLength: 3.1,
				// datGUI的控制器和控制器对象
				ctrl:null,
				ctrlObj:{}
			}
		},
		created() {},
		mounted() {
			this.init();
			this.initDatGUI();
			this.animate();
		},
		//后续还要在beforeDestory中进行销毁
		beforeDestroy() {
			this.scene = null
			this.renderer = null
			this.camera = null
			this.mesh = null
			this.orbitControls = null
		},
		methods: {
			init() {
				let container = document.getElementById('container');
				this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
				// 特别注意，相机的位置要大于几何体的尺寸
				this.camera.position.y = 10;
				this.scene = new THREE.Scene();
				// BoxGeometry（立方体）
				let geometry = new THREE.SphereGeometry(this.radius, this.widthSegments, this.heightSegments, this.phiStart, this.phiLength, this.thetaStart, this.thetaLength);
				// MeshBasicMaterial材质
				let material = new THREE.MeshNormalMaterial();
				// Mesh（网格）
				this.mesh = new THREE.Mesh(geometry, material);
				this.scene.add(this.mesh);
				this.renderer = new THREE.WebGLRenderer({
					// 抗锯齿性
					antialias: true
				});
				// 设置背景色
				this.renderer.setClearColor('#428bca',1.0);
				this.renderer.setSize(window.innerWidth,window.innerHeight);
				container.appendChild(this.renderer.domElement);
				// 初始化轨道控制器
				// 还需要配合animate，不断循环渲染，达到用鼠标旋转物体的作用。
				this.orbitControls = new OrbitControls(this.camera, this.renderer.domElement);
				// 窗口大小自适应
				window.addEventListener('resize',this.onWindowResize,false);
			},
			animate() {
				// 控制旋转速度
				this.mesh.rotation.x += this.ctrlObj.rotationSpeed;
				this.mesh.rotation.y += this.ctrlObj.rotationSpeed;
				this.mesh.rotation.z += this.ctrlObj.rotationSpeed;
				// 控制是否显示网格
				this.mesh.material.wireframe = this.ctrlObj.wireframe;
				// 控制材质
				this.changeMaterial();
				requestAnimationFrame(this.animate);
				this.renderer.render(this.scene, this.camera);
			},
			changeMaterial(){
				if(this.ctrlObj.material == 'MeshBasicMaterial'){
					this.mesh.material = new THREE.MeshBasicMaterial();
				}else if(this.ctrlObj.material == 'MeshNormalMaterial'){
					this.mesh.material = new THREE.MeshNormalMaterial();
				}else if(this.ctrlObj.material == 'MeshDepthMaterial'){
					this.mesh.material = new THREE.MeshDepthMaterial();
				}
				
			},
			initDatGUI(){
				// 初始化datGUI控制器
				this.ctrl = new dat.GUI();
				// 初始化控制器对象
				// 属性值为数值
				this.ctrlObj.rotationSpeed = 0.01;
				this.ctrlObj.jumpSpeed = 0.01;
				// 属性值为bool类型
				this.ctrlObj.wireframe = true;
				// 属性值为下拉列表，先给个默认值，添加到控制器的时候再写下拉选项的值
				this.ctrlObj.material = 'MeshBasicMaterial';
                
                this.ctrlObj.backgroundColor = '#ffffff';
				this.ctrl.addColor(this.ctrlObj,"backgroundColor").onChange(e=>{
					console.log(e);
					this.renderer.setClearColor(e);
				});
                
				// 属性值为一个方法，注意不要写成this.addCube()
				this.ctrlObj.addCube = this.addCube;
				
				this.ctrl.add(this.ctrlObj,"rotationSpeed",0,1);
				this.ctrl.add(this.ctrlObj,"wireframe");
				this.ctrl.add(this.ctrlObj,"material",['MeshBasicMaterial','MeshNormalMaterial','MeshDepthMaterial']);
				this.ctrl.add(this.ctrlObj,"addCube");
			},
			addCube() {
				// 立方体
				let geometry1 = new THREE.BoxGeometry(1, 1, 1);
				// MeshBasicMaterial材质
				let material1 = new THREE.MeshBasicMaterial({
					color: 0x0000ff,wireframe: true
				});
				var cubeTemp = new THREE.Mesh(geometry1, material1);
				cubeTemp.position.x = Math.random()*10;
				cubeTemp.position.y = Math.random()*8;
				cubeTemp.position.z = Math.random()*5;
				cubeTemp.rotation.x += Math.random();
				cubeTemp.rotation.y += Math.random();
				this.scene.add(cubeTemp);
			},
			onWindowResize(){
			    this.camera.aspect = window.innerWidth / window.innerHeight;
			    this.camera.updateProjectionMatrix();
			    this.renderer.setSize(window.innerWidth,window.innerHeight);
			}
		}
	}
</script>

<style scoped>
	#container {
		height: 500px;
	}
	
</style>

最终效果：

datGUI演示