咱们先从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文件代码的构建顺序。