【three.js学习笔记】04 dat.gui 组件使用

dat.gui组件使用

dat gui组件可以方便地改变某些值，并快速预览这些值的改变所产生的变化
github项目位置
https://github.com/dataarts/dat.gui

在加入这个script之后 对这个进行初始化，这样我们才能知道需要更改哪些变量:

//创建一个需要进行改变的控制变量对象
var guiControl = new function(){
	this.rotationSpeed = 0.02;
	this.circleSpeed = 0.02;
	this.upDownSpeed = 0.02;
}

将这个对象传递给gui对象，让它的数值变成可以控制的：

	var gui = new dat.GUI();//新建gui控制组件
	gui.add(guiControl, 'rotationSpeed', 0, 1);//添加旋转的速度数值控制 数值大小在0-1之间
	gui.add(guiControl, 'circleSpeed', 0, 1);//绕点旋转速度
	gui.add(guiControl, 'upDownSpeed', 0, 1);//上下活塞运动速度

更改了一小部分的代码旋转物体的函数代码，要三个速度太麻烦了干脆改成了一个

	//旋转物体的函数
	function rotate(obj,speed){
		obj.rotation.x += speed;
		obj.rotation.y += speed;
		obj.rotation.z += speed;
	}

更改animate函数，让其对控制器的数值产生反应

	function animate(){
		requestAnimationFrame(animate);
		rotate(cube,guiControl.rotationSpeed);
		goesRound(sphere,guiControl.circleSpeed);
		upAndDown(cylinder,guiControl.upDownSpeed);
		renderer.render(scene,camera);
		controls.update();
		stats.update();
	}

完成 运行代码：

这个时候就能通过调整右边控制面板上面的 数值来对动画的速度进行实时地观察了

添加浏览器自适应

添加浏览器窗口大小的自适应事件，可以让浏览器大小发生改变的时候，不会有地方留出空白

//浏览器大小时改变相机与渲染器函数
function onResize(){
	camera.aspect = window.innerWidth/window.innerHeight;//改变相机的长宽比
	camera.updateProjectionMatrix();//更新相机投影矩阵 如果没有这个那么在改变窗口大小的时候就会拉伸变形
	renderer.setSize(window.innerWidth,window.innerHeight);//更新渲染器大小
}

同时需要添加一个监听事件，让浏览器页面大小发生改变的时候触发该事件：

window.addEventListener('resize', onResize, false);

将变量camera/renderer/scene定义都移动到init函数外面，让onResize()函数可以访问得到变量；

var scene,camera,renderer;
function onResize(){
	……
}
function init(){
	……
}
window.addEventListener('resize', onResize, false);

这个时候改变相机大小 ，中心点的位置不会改变了
完成效果：
three.js 使用dat.gui
请自行查看源码开放