100个酷炫的数据可视化大屏总有一款适合你(含演示实例)，30款 vue3 数据可视化大屏登录页下载

threejs gui.js库（可视化改变三维场景） 学习笔记

threejs yekong

dat.gui.js说白了就是一个前端js库，对HTML、CSS和JavaScript进行了封裝，学习开发的 时候，借助dat.gui.js可以快速创建控制三维场景的U交互界面，你打开课件中案例源码体验一下就能感受到。

学习dat.guijs也不仅仅是为了学习dat.gui.js，也是建立一种思想，就是threejs三维空间的很多参数，不是心算出来的，往往需要可视化的方式调试出来。

引入dat.qui.js

你可以通过npm或github方式获得dat.gui.js库，当然为了学习方便，threejs官方案例扩展车中也提供了guijs，你可以直接使用。

threejs版本

"three": "^0.154.0",

引入GUI

// 引入GUI
import {GUI} from "three/addons/libs/lil-gui.module.min.js";

初始化

const gui = new GUI()

全屏以及退出全屏

全屏以及退出全屏

let eventObj = {
Fullscreen:function () {
  document.body.requestFullscreen();
  console.log('全屏')
},
ExitFullscreen:function () {
  document.exitFullscreen();
  console.log('退出全屏')
},
}
const gui = new GUI();
gui.add(eventObj, 'Fullscreen').name('全屏');
gui.add(eventObj, 'ExitFullscreen').name('退出全屏');

控制立方体的方向

控制立方体的方向

 gui.add(cube.position, 'x', -10, 10, 0.1).name('立方体x轴位置');
 或
 gui.add(cube.position, 'x').min(-10).max(10).step(1).name('立方体x轴位置');

操作分组

操作分组

let folder = gui.addFolder('立方体位置');
folder.add(cube.position, 'x').min(-10).max(10).step(1).name('立方体x轴位置');
folder.add(cube.position, 'y').min(-10).max(10).step(1).name('立方体y轴位置');
folder.add(cube.position, 'z').min(-10).max(10).step(1).name('立方体z轴位置');

当值发生改变时触发事件

我们可以通过onChange事件来处理当值发生变化是要进行的操作

  folder.add(cube.position, 'x').min(-10).max(10).step(1).name('立方体x轴位置').onChange((val) => {
    console.log(val)
  });

当值改变后触发事件

我们可以通过onFinishChange事件来处理当值结束变化后进行的操作

folder.add(cube.position, 'y').min(-10).max(10).step(1).name('立方体y轴位置').onFinishChange((val) => {
console.log(val)
});

设置颜色

通过addColor可以添加调色板设置立方体的颜色

gui.addColor(cube.material, 'color').name('立方体颜色');

演示地址

threejs 应用lil-GUI调试开发3D效果

学习笔记

当前内容为 threejs视频教程 Three.js可视化企业实战WEBGL课 -Three.js开发入门与调试设置-应用lil-GUI调试开发3D效果-学习笔记

喜欢