使用dat.GUI实现参数快速调节

2年前 (2023) 程序员胖胖胖虎阿

173 0 0

上篇文章和读者分享了相机的位置参数问题，读者发现，每次参数调整都需要先修改代码再刷新页面才能显示出效果，有没有更快捷的方式呢？有，那就是dat.GUI，本文就来看看这个东西的使用。

本文是threejs系列的第五篇，阅读前面的文章有助于更好的理解本文：

1.一个简单的案例，理解threejs中几个基本概念
2.三维世界中的坐标系
3.3d弹弹球
4.3d弹弹球(加强版)
5.三维世界中相机的位置参数

dat.GUI是一个轻量级的、图形化的js变量修改库，凡是有变量修改的场景，都可以使用，本文我们通过dat.GUI库来动态的控制相机的位置等参数(实际上可以用其控制很多参数，本文以相机位置参数为例)。

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