threejs ~GUI工具的使用

Dat.gui 是一个 GUI 组件，他可以为你的 demo 提供参数的设置

先看一下想实现的效果

美观又实用 下边我们来简单实现下通过gui实现全屏与退出全屏

安装与引入

 npm install --save dat.gui

import * as dat from "dat.gui";

实例化对象 

const gui = new dat.GUI(); //可传递参数{ closed:true ,width:400 }

封装一个对象方法

let eventObj = {
  fullScreen: function () {
    document.body.requestFullscreen();
  },
  ExitFullscreen: function () {
    document.exitFullscreen();
  },
};

然后gui直接添加就OK了

gui.add(eventObj, "fullScreen").name("全屏");
gui.add(eventObj, "ExitFullscreen").name("退出全屏");

就实现上边那个效果了 点击全屏就展示全屏  点击退出全屏就退出全屏