前言
为什么要学这个呢，其实就目前来看WebGL与最为人接受的前端开发关系不大，目前主流前端开发来看，webGL实属“旁门别类”，但是我们需要注意的是对于web GL相关需求其实也一直是有的，甚至于说还不少，当然相对于主流web开发还是少很多的。回到正题，其实学这个一个很重要的原因就是需要使用，由于课题成果被老师极为看重，他特别想让我搞出来这种类似3D无人机对战的效果。
canvas、SVG、WebGL
首先是这三个概念的区别，SVG可以说是主流web开发经常使用到的，毕竟iconfont每个人都会接触到，而基于SVG的icon表现则是目前来说效果最好的，这里我们直接引入MDN的定义：
可缩放矢量图形（Scalable Vector Graphics，SVG），是一种用于描述基于二维的矢量图形的，基于 XML 的标记语言。本质上，SVG 相对于图像，就好比 HTML 相对于文本。
SVG 是一个基于文本的开放 Web 标准。它的设计明确地保证它与 CSS、DOM，以及 SMIL 等其他Web标准一同运作。
SVG 图像及其相关行为被定义于 XML 文本文件之中，这意味着可以对它们进行搜索、索引、编写脚本以及压缩。此外，这也意味着可以使用任何文本编辑器和绘图软件来创建和编辑它们。
SVG 是由万维网联盟（W3C）自 1999 年开始开发的开放标准。
从这里可以很明显的看出一些SVG相对于普通图片的优势。
canvas则是目前面试前端时H5最容易被问到的问题之一，首先它是H5新增加的一个元素标签，其实就是一个画布。它自身API的限制是2D，一般用于绘制比较复杂的动画,做游戏之类的。
WebGL则是一套3D图形API，以opengl ES2.0为基础，他需要一个呈现对象来呈现这个3D效果，而canvas就是这个呈现的媒介。web GL不仅可以用于3D图形处理，2D自然也可以通过一定的手段达到。
关于web GL规范和图形学的东西时则是一个庞然大物，对于我目前的需求，从根源学起很难在短时间内开发出可用应用，针对这些，一些基于web GL的封装库就有了其用武之地，而three.js和babylon.js则是其中的佼佼者。
Three.js
three.js作为最经典，同时也是github star数最多的web GL库，可以说是很多项目选型的首选，我个人一开始也是相当中意这个库。
同时这个库研究的人也是很多，中文相关文档也有很多
babylon.js
这是微软13年出的，相对于three.js可以说是很新的库了，但是这个库自上线以来一直都挺受欢迎的。
对比
因为目前了解不算太深，只能借助一些网络上大拿的资料来进行分析，其中他们提到了一点让我觉得很有参考意义：
three.js是用来做动画的，而babylon.js更适合做游戏
这句话也差不多左右了我的选择，因为我个人看babylon官方手册与react结合的文档都有一些例子，但是这些例子很难在three.js 中找到，但是既然目的是来做动画，自然使用three.js来做效果会更加适合。
a. 渲染器（render）我们可以把渲染器想想成为一个画布，我们需要在这个画布上去画出我们需要展示的东西。
b. 场景（scene）相当于一个空间，我们需要将展示的东西放在这个空间里，然后再在画布上绘制出来。
c. 照相机（camera）相当于眼睛，我们想要看到物体，就需要眼睛去看。
d. 光源（light）物体需要光照才能看见，不然就是漆黑一片（但是在某些情况下展示物体不需要光源）。
e. 物体（object）我们想要表现的内容，会有形状和材质属性。
上文来自知乎岂安科技官方号的回答，比较详细的介绍了一下three.js的基础五要素，另外关于使用模块化语法和es6import语法来写three.js 项目的方式也大概有了了解，下一步就是实战中使用。
入门
为了简单，这里使用的是react-three-fiber:
import React, { useRef } from "react";
import { Canvas, useFrame } from "react-three-fiber";
const Thing = () => {
const ref = useRef();
useFrame(() => (ref.current.rotation.x = ref.current.rotation.y += 0.01));
return (
<mesh
ref={ref}
onClick={e => console.log("click")}
onPointerOver={e => console.log("hover")}
onPointerOut={e => console.log("unhover")}
>
<boxBufferGeometry attach="geometry" args={[1, 1, 1]} />
<meshNormalMaterial attach="material" />
</mesh>
);
};
function App() {
return (
<Canvas>
<Thing />
</Canvas>
);
}
export default App;
做出来的大概是：
