Three.js Examples
在vue-cli3中使用three.js的OBJLoader和MTLLoader来加载三维模型文件.obj和.mtl
注意：需要threeJs load的模型，只能放在静态资源目录下。
- 新建vue-cli3项目。
- 引入three.js：cnpm i three --save-dev （最好用cnpm，npm下载的包版本过低）
/**
* 创建渲染器对象
*/
this.renderer = new THREE.WebGLRenderer({
antialias: true // 抗锯齿
})
// 参数：相机的开角，成像的比例，1 相机能拍摄到的最近距离，10000是相机能拍到的最远距离
const width = this.container.clientWidth // 窗口宽度
const height = this.container.clientHeight // 窗口高度
const k = width / height // 窗口宽高比 2
this.camera = new THREE.PerspectiveCamera(45, k, 1, 100000) // 透视摄像机
// up是头顶的方向，position 是相机的位置，lookAt 相机指向的焦点
- 材质类型
MeshBasicMaterial：基础网格材质，不受光照影响的材质
MeshLambertMaterial：Lambert网格材质，与光照有反应，漫反射
MeshPhongMaterial： 高光Phong材质,与光照有反应
MeshStandardMaterial：PBR物理材质，相比较高光Phong材质可以更好的模拟金属、玻璃等效果
// 安装依赖
npm install three-orbitcontrols
// 页面引入
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
- 引入ThreeBSP (用于组合多个几何体)，threeJs挖洞教程
安装依赖：cnpm install tthreebsp
// 页面使用：
import * as THREE from 'three'
const ThreeBSP = require('tthreebsp')(THREE)
intersect（交集）
union（并集）
subtract（差集）
- 引入动画插件tween
npm install --save @tweenjs/tween.js
文档阅读笔记：
-
纹理（Textures）
如果更改了图像，画布，视频和数据纹理，则需要设置以下标志：
texture.needsUpdate = true;
渲染对象就会自动更新。
废置对象——dispose()
旋转——绕向量
网格模型绕(0,1,0)向量表示的轴旋转π/8
var axis = new THREE.Vector3(0,1,0);//向量axis
mesh.rotateOnAxis(axis,Math.PI/8);//绕axis轴旋转π/8
vue修饰符：
.capture // 采用事件捕获的方式触发事件
