vue+three.js开发

three.js中文文档

 

Three.js Examples
在vue-cli3中使用three.js的OBJLoader和MTLLoader来加载三维模型文件.obj和.mtl
注意：需要threeJs load的模型，只能放在静态资源目录下。

• 1. 新建vue-cli3项目。
• 1. 引入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材质可以更好的模拟金属、玻璃等效果

• 1. 引入three中的OrbitControls控制器

// 安装依赖
npm install three-orbitcontrols
// 页面引入
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'

• 1. 引入ThreeBSP (用于组合多个几何体)，threeJs挖洞教程

安装依赖：cnpm install tthreebsp
// 页面使用：
import * as THREE from 'three'
const ThreeBSP = require('tthreebsp')(THREE)
intersect（交集）
union（并集）
subtract（差集）

• 1. 引入动画插件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 // 采用事件捕获的方式触发事件