图形化开发（一）——Three.js基本介绍-优缺点-在线编辑器 & Babylon.JS是最好的JavaScript3D游戏引擎

图形化开发（一）——Three.js基本介绍-优缺点-在线编辑器 & Babylon.JS是最好的JavaScript3D游戏引擎

• 课程主要学习目标
  • Threejs ( 3d )
  • D3 (做数据可视化，echarts)
• 未来前端发展的三个方向
  • 主流前端工程师，PC ,桌面，移动端
    • 岗位多，竞争激烈
  • nodejs服务端工程师
    • 岗位适中， 竞争中等
  • 图形化，游戏等
    • 岗位比较少，竞争少， 数学难度高

Threejs

为什么？

webGL太难用，太复杂！

但是现代浏览器都支持 WebGL

这样我们就不必使用 Flash、Java 等插件就能在浏览器中创建三维图形。

Three.js 的出现完美地解决了这个矛盾。

它提供一个很简单的关于 WebGL 特性的 JavaScript API，使得用户不需要详细地学习 WebGL，就能轻松创作出好看的三维图形样例。

WebGL原生的api是一种非常低级的接口，而且还需要一些数学和图形学的相关技术。对于没有相关基础的人来说，入门真的很难，Three.js将入门的门槛降低了整整的一大截，对WebGL进行封装，简化我们创建三维动画场景的过程。只要你有一定的JavaScript的基础，有一定的前端经验，我坚信，用不了多长时间，三维制作会变得很简单。

学习Three.js入门3D开发不但门槛低，而且学习曲线不会太陡，即使以后转向WebGL原生开发，也能通过Three.js学习到很多有用的知识。 并且在webGL封装的各种库来讲，threejs现在是独领风骚。

现在最火的微信小游戏跳一跳也是在Three.js的基础上开发出来的。

所以，你如果要学3D，Three.js是我们必须要学的WebGL框架。

基本介绍

Threejs 该项目的目的是使用默认的WebGL渲染器创建一个易于使用，轻量级的3D库。该库还在示例中提供了Canvas 2D，SVG和CSS3D渲染器。

https://github.com/mrdoob/three.js

特点

Three.js作为WebGL框架中的佼佼者，由于它的易用性和扩展性，使得它能够满足大部分的开发需求。

1. Three.js掩盖了3D渲染的细节：Three.js将WebGL原生API的细节抽象化，将3D场景拆解为网格、材质和光源(即它内置了图形编程常用的一些对象种类)。
2. 面向对象：开发者可以使用上层的JavaScript对象，而不是仅仅调用JavaScript函数。
3. 功能非常丰富：Three.js除了封装了WebGL原始API之外，Three.js还包含了许多实用的内置对象，可以方便地应用于游戏开发、动画制作、幻灯片制作、髙分辨率模型和一些特殊的视觉效果制作。
4. 速度很快：Three.js采用了3D图形最佳实践来保证在不失可用性的前提下，保持极高的性能。
   支持交互：WebGL本身并不提供拾取（picking)功能（即是否知道鼠标正处于某个物体上）。而Three.js则固化了拾取支持，这就使得你可以轻松为你的应用添加交互功能。
5. 包含数学库：Three.js拥有一个强大易用的数学库，你可以在其中进行矩阵、投影和矢量运算。
6. 内置文件格式支持：你可以使用流行的3D建模软件导出文本格式的文件，然后使用Three.js加载；也可以使用Three.js自己的JSON格式或二进制格式。
7. 扩展性很强：为Three.js添加新的特性或进行自定义优化是很容易的事情。如果你需要某个特殊的数据结构，那么只需要封装到Three.js即可。

缺点

1. 官网文档非常粗糙，对于新手极度不友好。
2. 国内的相关资源匮乏。
3. Three.js所有的资料都是以英文格式存在，对国内的朋友来说又提高了门槛。
4. Three.js不是游戏引擎，一些游戏相关的功能没有封装在里面，如果需要相关的功能需要进行二次开发。

与Babylon.js对比

https://github.com/BabylonJS/Babylon.js

Babylon.JS是最好的JavaScript3D游戏引擎，它能创建专业级三维游戏。主要以游戏开发和易用性为主。与Three.js之间的对比：

1. Three.js比较全面，而Babylon.js专注于游戏方面。
2. Babylon.js提供了对碰撞检测、场景重力、面向游戏的照相机，Three.js本身不自带，需要依靠引入插件实现。
3. 对于WebGL的封装，双方做的各有千秋，Three.js浅一些，好处是易于扩展，易于向更底层学习；Babylon.js深一些，好处是易用扩展难度大一些。
4. Three.js的发展是依靠社区推动，出来的比较早，发展比较成熟，Babylon.js是由微软公司在2013推出，文档和社区都比较健全，国内还不怎么火。

PC兼容性

基本上所有的现代浏览器都支持 Three.js。

• Firefox：4.0 版本后开始支持
• Chrome：9.0 版本后开始支持
• Safari：5.1 版本后开始支持
• Opera：12.00 版本后开始支持
• IE：IE11 起才开始支持（唯一一个很长时间都不支持 WebGL 的浏览器）

移动端兼容性

• Android：Android 原生的浏览器是不支持 WebGL 的。如果想在 Android 上运行 WebGL，需要安装最新的移动版本的 Chrome、Firefox 或者 Opera。
• iOS：从 iOS8 起就开始支持
• Windows mobile：从 8.1 版本后开始支持

在线编辑器

https://threejs.org/editor/

可以通过可视化的方式导出并生成代码，也可以导入的代码在线演示。