一、three场景的构建结构

        咱们先从three场景的构建开始讲，一些代码的构建是很有必要的。

        我的项目是vue3+vite+elementplus开发的，我的three文件夹放到了src的里面。

一、项目中的three文件引用布局

二、在components里面新建一个scene文件夹下心中index.vue文件

三、其中index.vue页面里面的内容引入了所有需要的文件，他们的顺序是

// 导入gui对象,是一个类似下拉选择改变某项值，或者物体颜色等右上角的控件
import gui from '@/three/gui'
// 导入场景
import scene from '@/three/scene'
// 导入相机
import camera from '@/three/camera'
// 导入控制器
import controls from '@/three/controls'
// 导入辅助坐标轴
import axesHelper from '@/three/axesHelper'
// 导入渲染器
import renderer from '@/three/renderer'
// 初始化调整屏幕
import '@/three/init'
// 导入添加物体函数
import createMesh from '@/three/createMesh'
// 导入每一帧的执行函数
import animate from '@/three/animate'
// 展示点坐标的实例
import AlarmSprite from '@/three/mesh/AlarmSprite'
// 展示一个发光的墙的实例
import LightWall from '@/three/mesh/LightWall'
// 展示一个会动的飞线的实例
import FlyLineShader from '@/three/mesh/FlyLineShader'
// 展示一个会动的光圈的实例
import LightRadar from '@/three/mesh/LightRadar'
// 根据Mitt的是实例对象，拥有组件传值的功能
import eventHub from '@/utils/eventHub'

以上就是我的three文件代码的构建顺序。