设置展示3D效果的视图
<div ref="container" class="threeContainer"></div>
引入依赖库、声明通用变量
import { ref, onMounted } from 'vue';
import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
let container = ref(null)
let scene, camera, renderer, controls;
1、初始化场景 initScene
2、初始化相机 initCamera
3、添加渲染器 initRender
4、添加灯光 initLight
5、添加交互控制器 initControl
6、添加场景动画效果 initAnimate
7、加载数据模型文件 addModel
8、渲染到页面 renderContainer
9、在需要的时候按顺序调用上述方法
