threejs:vue里dat GUI的简单用法
1、引入datGUIdatGUI并不是threejs自带的,需要自己另外下载。2、定义datGUI的控制器和添加到控制器里的对象3、对以上两个变量进行初始化CtrlObj是一个对象类型,那么要记得,对象类型的数据由key和value组成,如果key比较少,可以写成上图的形式,如果key比较多,建议用.keyname的形式,如下图,0.01就是key的默认值。4、添加控制器对象到控制器引号里的名字必
·
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演示
更多推荐
已为社区贡献1条内容
所有评论(0)