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

1年前 (2023) 程序员胖胖胖虎阿
114 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页面中引入:

  
  
  
  1. <script src="js/dat.gui.js"></script>

接下来构造一个对象,将所有需要修改的参数传进去,如下:

  
  
  
  1. var FizzyText = function () {

  2.    this.camerax = 0;

  3.    this.cameray = 0;

  4.    this.cameraz = 60;

  5.    this.camera_rotation = '[0, 1, 0]';

  6. };

我这里配置了相机的position的坐标以及up的位置。接下来,添加对这几个变量的监听,如下:

  
  
  
  1. var params = new FizzyText();

  2. var gui = new dat.GUI();

  3. gui.add(params, 'camerax', 0, 60).name("camera.x").onChange(val => {

  4.    camera.position.x = val;

  5. });

  6. gui.add(params, 'cameray', 0, 60).name("camera.y").onChange(val => {

  7.    camera.position.y = val;

  8. });

  9. gui.add(params, 'cameraz', 30, 360).name("camera.z").onChange(val => {

  10.    camera.position.z = val;

  11. });

  12. gui.add(params, 'camera_rotation', {'不旋转': '[0, 1, 0]', '45度': '[1, 1, 0]', '90度': '[1, 0, 0]'}).onChange(val => {

  13.    var parse = JSON.parse(val);

  14.    camera.up.x = parse[0];

  15.    camera.up.y = parse[1];

  16.    camera.up.z = parse[2];

  17. });

分别创建参数对象和dat.GUI对象,然后调用dat.GUI对象的add方法,第一个参数就是参数对象,第二个参数是参数对象中的变量名,接下来两个参数是该变量的取值范围,name中的参数是指控制面板上的显示文本,最后的onChange则是该变量发生变化时的回调。注意,由于camera_rotation是一个下拉列表,因此描述时候使用{},{}中则使用key/value的形式来表示显示文本和真正的value。

最后在显示方法中指定lookAt即可,如下:

  
  
  
  1. function show() {

  2.    step += 0.04;

  3.    camera.lookAt(0, 0, 0);

  4.    sphere.position.x = 20 + (10 * (Math.cos(step)));

  5.    sphere.position.y = 2 + (10 * (Math.abs(Math.sin(step))));

  6.    requestAnimationFrame(show)

  7.    render.render(scene, camera);

  8. }

效果

经过如上改造后,我们就可以在html页面中动态操作相机的位置了,如下:

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

好了,本文就先介绍到这里,有问题欢迎留言讨论。

本文案例:https://github.com/lenve/threejsDemo

本文分享自微信公众号 - 江南一点雨(a_javaboy)。
如有侵权,请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一起分享。

版权声明:程序员胖胖胖虎阿 发表于 2023年3月20日 下午5:08。
转载请注明:使用dat.GUI实现参数快速调节 | 胖虎的工具箱-编程导航

相关文章

暂无评论

暂无评论...