设置展示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、在需要的时候按顺序调用上述方法