1.Canvas,OpenGL,WebGL到底都是干嘛的？
canvas 本质是html标签，额外提供了一些api进行绘制，canvas的api主要可以绘制2d图形
WebGL是js api 可以在任何兼容WebGL的浏览器里面去渲染高性能的交互式的3D和2D图形
有些浏览器可能不支持WebGL
WebGL提供了很多api方法，这些方法和OpenGL提供的方法其实是非常相似的
OpenGL是一套用来渲染2D和3D矢量图形的跨语言跨平台的应用程序接口 这种接口通常用来与图形处理相关的GPU去进行交互 从而达到硬件加速渲染的目的
WebGL正是利用了浏览器中的图形加速硬件的处理来去进行的一个图形渲染这也是为什么我们想让浏览器支持WebGL就必须要开启浏览器硬件加速的一个原因
WebGL通过js与HTML5中的Canvas元素去进行交互并提供了在web上去展示复杂3D图形和交互式体验的一个能力
Canvas:本质上就是提供了一个基本的2D渲染环境
OpenGL:跨平台图形编程接口规范
WebGL:利用了OpenGL的jsapi 用于在浏览器中去进行高性能的3D图形渲染 可以把WebGL看作是Canvas上使用OpenGL去进行3D渲染的一种实现方式
2.three.js
vue create threes-car
在项目中安装
cnpm install --save three@0.152.2
npm run serve
场景 Scene：它表示要绘制的内容，是整个 threejs 绘制的基础
相机 camera：相机分为很多种，咱们这里主要使用 PerspectiveCamera 透视相机。它是一个最常用的相机模式，主要可以模拟人眼看到的效果
渲染器 renderer：它的作用比较简单，主要用来渲染场景
几何体 Geometry：要渲染的物体形状。物体形状有非常多，咱们这里主要使用立方体 BoxGeometry
材质 material：为物体赋予一些材质，比如是光滑的镜面，还是粗糙的表面。咱们这里主要使用的是基础材质 MeshBasicMaterial
网格基类 mesh：将几何体与材质合并成基类。最后可以加入到场景中
渲染函数 renderer.render ：利用渲染器的渲染函数，可以根据场景和摄像头进行渲染
重绘函数 requestAnimationFrame：它与渲染函数配合，可以重复进行渲染，即：生成动画
cnpm i --save-dev file-loader@6.2