【21】实战——three.js应用图形用户界面更改变量

安装依赖：

通过运行cnpm install --save dat.gui命令来安装dat.gui库。

导入dat.gui：

使用import * as dat from "dat.gui";语句来导入dat.gui。

创建gui：

实例化dat.GUI对象：const gui = new dat.GUI();。

添加控制选项：

为立方体的位置添加可调节的X轴控制器：gui.add(cube.position,"X").min(0).max(5);。

Three.js和Vue集成：

在Vue组件中创建Three.js场景、相机、几何体、材质、渲染器、轨道控制器和坐标轴辅助器。设置相机位置，添加立方体到场景，初始化渲染器并将其添加到DOM中。监听双击事件以全屏和退出全屏，监听窗口尺寸变化以更新渲染视图。

GUI控制：

使用dat.GUI添加立方体位置、颜色、可见性的控制选项，以及一个触发立方体运动的按钮。增加一个设置立方体属性的文件夹。

动画和渲染：

定义渲染函数以更新控制器和渲染场景，使用requestAnimationFrame进行动画循环。通过绑定this来避免调用堆栈溢出问题。

样式：

设置全局样式，确保容器占满视口且背景色设置为#f0f0f0。