threejs官网

https://threejs.org/docs/index.html#manual/zh/introduction/Installation （官网非常的详细）

导入安装

npm install three （下载安装threejs）

然后就可以在项目中导入threejs

import * as THREE from 'three'

创建场景和相机

就是需要一个场景来呈现 3D效果 相机是 对于在哪个位置来观察这个场景中的3D效果（这里用到的Vue2）

上面就可以呈现基本的物体了（关于材质或者渲染器什么的可以去 官网看看非常的详细）

接下来引入轨道  就是物体可以跟随鼠标的移动而移动

import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'　

// 创建轨道控制器 第一个参数是相机 第二个参数是 要渲染的元素
const container = new OrbitControls(this.camera, this.renderer.domElement)
// 先执行一下那个渲染函数

   this.render()

render () {  
  // 每一帧都会渲染轨道控制器 参数是场景和摄像头  
  this.renderer.render(this.scene, this.camera)  
  // 浏览器自带渲染 下一帧的时候就去在执行这个函数  
  requestAnimationFrame(this.render)  
}

　还有一些小功能 （不要在意那些变量都是不同代码找到的所以有些变量不一样嘿嘿）

// 添加坐标 参数是大小的意思
const axesHelper = new THREE.AxesHelper(5)
// 添加到场景 中
this.scene.add(axesHelper)
// 设置物体的位置
// this.cube.position.set(5,0,0)
// 也可以单独设置
this.cube.position.x += 0.1
// 物体的缩放 set 参数是xyz
this.cube.scale.set(2, 3, 1)
// 也可以设置旋转 set (x,y,z)
// 下面例子 Math.PI代表180° 'XYZ' 表示先旋转什么
// eg:this.cube.rotation.set(Math.PI /4 0,0,'XYZ')
// 下面是代表不断的旋转
this.cube.rotation.x += 0.1
// 这个是threejs 带的算时间的
this.clock = new THREE.Clock()
// 创建控制器
this.container = new OrbitControls(this.camera, this.renderer.domElement)
// 设置控制阻尼器，让控制器更有真实效果 必须在动画循坏的时候调用update().
container.enableDamping = true

当然配合使用一些好用的库 比如gsap(后期有时间会专门写一些这个动画库特别的厉害各种线性动画或者3D动画都是牛的)

https://greensock.com/docs/v3/GSAP 官网

还有一个好用的库  dat.gui 用来控制一些变量来帮助开发（非常的不错用起来也非常简单可以百度一下）

下载安装 npm install --save dat.gui
// 导入dat.gui 控制变量
import * as dat from 'dat.gui'

知道了这些就可以做一些简单的好玩的效果了 但是需要找一些好看的3D模型 这里推荐一个

https://sketchfab.com/3d-models?features=downloadable&sort_by=-likeCount 这个也是threejs官网给的里面有好多的模型而且特别多免费的

下面代码是gltf 模型和组合gsap 动画 包括模型上面带的动画组成的一个会走的宇航员 （非常有意思可以试试）

请多多指教