vue+three.js实现3D动画场景，详解

three.js在vue中的使用: three官方文档.
如需要源码，可留言联系我
链接: $关于GLTF文件引入下一篇会用到，点击跳转$
https://blog.csdn.net/Liiiiiiiie/article/details/117563070
首先，下载依赖 npm install --s three

---

然后了解一下three生成3D场景需要的三个因素

• 场景：初始化一个场景，可以在场景内添加3D模型，灯光等
• 相机：决定从哪个角度看到场景内的元素
• 渲染器： 将场景渲染到页面中

1.新建vue页面

	<template>
  		<div>
    		<div id="container"></div>
  		</div>
	</template>

2.引入three.js相关

	import * as THREE from "three";
	//以下是控制器，3Dloader引入方式，可在node_modules/three/examples/jsm目录下
	//查找，用到哪个引哪个，GLTFLoader将在下一章讲使用方法
	import {
    OrbitControls } from "three/examples/jsm/controls/OrbitControls";
	//import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";

3.开始使用

由于上面已经引入three，可直接使用初始化场景

	const scene = new THREE.Scene(); //这就初始化好了场景

添加相机,此处使用$PerspectiveCamera(透$