使用dat.GUI实现参数快速调节
上篇文章和读者分享了相机的位置参数问题，读者发现，每次参数调整都需要先修改代码再刷新页面才能显示出效果，有没有更快捷的方式呢？有，那就是dat.GUI，本文就来看看这个东西的使用。
本文是threejs系列的第五篇，阅读前面的文章有助于更好的理解本文：
1.一个简单的案例，理解threejs中几个基本概念 2.三维世界中的坐标系 3.3d弹弹球 4.3d弹弹球(加强版) 5.三维世界中相机的位置参数
dat.GUI是一个轻量级的、图形化的js变量修改库，凡是有变量修改的场景，都可以使用，本文我们通过dat.GUI库来动态的控制相机的位置等参数(实际上可以用其控制很多参数，本文以相机位置参数为例)。
dat.GUI通过一个控制面板来动态调节参数，面板类似如下这样：
面板前面的是提示文本，中间是一个拖动条，最后是具体数值，当然，如果数据不是均匀变化的，也可以通过下拉框选择或者文本输入等，有多种不同形式。
好了，接下来我们来看看dat.GUI的使用步骤。
下载
使用dat.GUI，首先在GitHub上下载该开源库，下载地址如下：
https://github.com/dataarts/dat.gui。
使用
将下载后的t.GUI库解压，然后将build目录下的dat.gui.js文件拷贝到当前项目中，然后在html页面中引入：
<script src="js/dat.gui.js"></script>接下来构造一个对象，将所有需要修改的参数传进去，如下：
var FizzyText = function () {
this.camerax = 0;
this.cameray = 0;
this.cameraz = 60;
this.camera_rotation = '[0, 1, 0]';
};我这里配置了相机的position的坐标以及up的位置。接下来，添加对这几个变量的监听，如下：
var params = new FizzyText();
var gui = new dat.GUI();
gui.add(params, 'camerax', 0, 60).name("camera.x").onChange(val => {
camera.position.x = val;
});
gui.add(params, 'cameray', 0, 60).name("camera.y").onChange(val => {
camera.position.y = val;
});
gui.add(params, 'cameraz', 30, 360).name("camera.z").onChange(val => {
camera.position.z = val;
});
gui.add(params, 'camera_rotation', {'不旋转': '[0, 1, 0]', '45度': '[1, 1, 0]', '90度': '[1, 0, 0]'}).onChange(val => {
var parse = JSON.parse(val);
camera.up.x = parse[0];
camera.up.y = parse[1];
camera.up.z = parse[2];
});分别创建参数对象和dat.GUI对象，然后调用dat.GUI对象的add方法，第一个参数就是参数对象，第二个参数是参数对象中的变量名，接下来两个参数是该变量的取值范围，name中的参数是指控制面板上的显示文本，最后的onChange则是该变量发生变化时的回调。注意，由于camera_rotation是一个下拉列表，因此描述时候使用{}，{}中则使用key/value的形式来表示显示文本和真正的value。
最后在显示方法中指定lookAt即可，如下：
function show() {
step += 0.04;
camera.lookAt(0, 0, 0);
sphere.position.x = 20 + (10 * (Math.cos(step)));
sphere.position.y = 2 + (10 * (Math.abs(Math.sin(step))));
requestAnimationFrame(show)
render.render(scene, camera);
}效果
经过如上改造后，我们就可以在html页面中动态操作相机的位置了，如下：
好了，本文就先介绍到这里，有问题欢迎留言讨论。
本文案例：https://github.com/lenve/threejsDemo