WEB 3D技术 three.js 通过lil-gui管理公共事件

首先 导入我们的 lil-gui

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

我们直接可以在代码最下面这样写

let eventobj = {
    Fullscreen: function(){
        // 全屏
        document.body.requestFullscreen();
    }
    ,
    exitFullscreen: function () {
        //取消全屏
        document.exitFullscreen();
    }
}
const Igui = new GUI();
Igui.add(eventobj,"Fullscreen").name("全屏");
Igui.add(eventobj,"exitFullscreen").name("取消全屏");

我们先定义了一个事件对象 eventobj 里面的话 定义了两个事件 Fullscreen
通过document下的body 调用requestFullscreen全屏函数
然后body全屏

然后 exitFullscreen 调用document的exitFullscreen 取消全屏

然后 我们new一个GUI对象
然后 通过这个对象 声明两个触发器
第一个参数 事件对象 事件到哪里去找 我们传入自己刚刚写的对象 eventobj
第二个参数 告诉它调用这个事件对象的哪一个事件 我们分别给全屏和取消全屏幕 设置了 Fullscreen和exitFullscreen
最后 点name 设置名称

运行代码 会发现 我们图层的右上角 出现了对应的按钮

我们点击全屏 就会body全屏

点击取消全屏 也能正常退出全屏

我们可以将一些公共事件交给GUI管理