vue-cli3 + threejs项目的一些注意点

[部分资源来源于网络。]

1.OpenGL大概许多人都有所耳闻，它是最常用的跨平台图形库。
2.WebGL是基于OpenGL设计的面向web的图形标准，提供了一系列JavaScript API，通过这些API进行图形渲染将得以利用图形硬件从而获得较高性能。
由于出色的JavaScript WebGL API,现代浏览器完全有能力在没有第三方插件帮助的情况下呈现先进的2 d和3 d图形。利用专用的图形处理器的性能,WebGL使我们访问的网页实现动态阴影和现实的物理。
3.而Three.js是通过对WebGL接口的封装与简化而形成的一个易用的图形库。
简单点的说法：WebGL可以看成是浏览器给我们提供的接口，在javascript中可以直接用这些API进行3D图形的绘制；WebGL需要相对较多的数学知识，而Three.js就是在这些接口上又帮我们封装得更好用一些。
4.babylon.js是由微软员工出品的WebGL框架，能够通过HTML5 canvas在网页构建一个3D的场景。它提供了对碰撞检测、场景重力、面向游戏的照相机（例如，跟踪移动对象的跟随照相机），以及对 Oculus Rift 和其他虚拟现实 (VR) 设备的本地支持。以游戏开发为主。
5.Babylon.js常用于制作3d游戏引擎，倾向于游戏开发；而Three.js是纯渲染引擎， 更倾向于动画。
6.三个非常流行的和一个目前还在开发中的JavaScript 物理引擎库： box2dweb，Ammo.js，JigLibJS 以及 Connon.js。（cannon.js 物理引擎）
7.Ammo.js是一个用 C++ 语言编写的物理库，物理引擎。它是 Bullet（物理引擎） 项目的 Emscripten 分支。
8.Bullet Physics是一个开源的物理模拟引擎，世界三大物理引擎之一（另外两种是Havok和PhysX）。已经被用于许多商用产品，例如侠盗猎车手4，荒野大镖客：救赎等游戏和电影2012，神探夏洛克等，同时，它还被许多3D创作工具使用，支持Bullet Physics物理引擎的设计软件有。

• Blender 3D；
• Cienma 4D；
• LightWave 3D Core
• 3Ds Max
• Maya
  ……

1.cnpm create vuecli-three
2.cnpm install three --save
3.import * as Three from ‘three’
import { OBJLoader } from ‘three/examples/jsm/loaders/OBJLoader’
import { OrbitControls } from ‘three/examples/jsm/controls/OrbitControls’
import Stats from ‘three/examples/jsm/libs/stats.module’
4.Three.js制作 3D 的五要素

1. 渲染器（render）
   我们可以把渲染器想想成为一个画布，我们需要在这个画布上去画出我们需要展示的东西。
2. 场景（scene）
   相当于一个空间，我们需要将展示的东西放在这个空间里，然后再在画布上绘制出来。
3. 照相机（camera）
   相当于眼睛，我们想要看到物体，就需要眼睛去看。
4. 光源（light）
   物体需要光照才能看见，不然就是漆黑一片（但是在某些情况下展示物体不需要光源）。
5. 物体（object）
   我们想要表现的内容，会有形状和材质属性。

5.this.stats.domElement.style.position= ‘absolute’
this.stats.domElement.style.left = ‘150px’;
this.stats.domElement.style.top = ‘60px’;
6.启用缓存THREE.Cache.enabled = true;这是一个全局属性，只需要设置一次，供内部使用FileLoader的所有加载器使用。
7.需要把.obj文件放到vue中处理静态文件的文件夹中，在vue-cli3中public文件夹下的文件不需要经过webpack处理，在vue-cli3.0之前就是放在static静态文件文件夹下，在vue-cli3.0中需要放在public文件夹下，并且在组件中通过process.env.BASE_URL+public文件夹下的.obj文件的路径来引用。
8.vue集成threejs后，web页面加载模型之后，FPS值在10以下；查阅资料是因为；声明的部分threejs的对象不可以放在data中；否则就会帧数特别低；
9.所有的函数准备完毕后在mounted()函数中开始引用,创建和调用模型的函数在任何地方调用都可以，建议放在init()函数的末尾
10.在一个较慢的GPU上，比如说手机，一般使用一个不太复杂的材质来减少绘制场景所需的GPU功耗。同样，如果不需要额外的功能，那就使用最简单的材质，已达到最佳的性能。如果你不需要照明和镜面高光，那么就使用 MeshBasicMaterial 。
11.在vue中使用three.js并实现基本模型的加载与动画实现
12.几何体顶点思路到地形制作
13Three.js程序生成山脉等地形效果
[部分资源来源于网络。]
14.Three.js获取模型顶点数据