为什么要学three.js?

讲到 Three.js，就需要先说一下 OpenGL 和 WebGL， OpenGL 是一个跨平台的3D/2D的绘图标准（规范），WebGL（Web Graphics Library）是一种3D绘图协议，它允许把JavaScript和OpenGL 结合在一起运用，但使用WebGL原生的API来写3D程序非常的复杂，同时需要相对较多的数学知识，对于前端开发者来说学习成本非常高。

1. WebGL

WebGL是一种Javascript的3D图形接口，把JavaScript和OpenGL ES 2.0结合在一起。

2. OpenGL

OpenGL是开放式图形标准，跨编程语言、跨平台，Javascript、Java 、C、C++ 、 python 等都能支持OpenGL ，OpenGL的Javascript实现就是WebGL。OpenGL ES 2.0是OpenGL的子集，针对手机、游戏主机等嵌入式设备而设计。

3. Canvas

Canvas是HTML5的画布元素，在使用Canvas时，需要用到Canvas的上下文，可以用2D上下文绘制二维的图像，也可以使用3D上下文绘制三维的图像，其中3D上下文就是指WebGL。

Three.js是什么？

官网：Three.js – JavaScript 3D Library

Three.js是基于webGL的封装的一个易于使用且轻量级的3D库，Three.js对WebGL提供的接口进行了非常好的封装，简化了很多细节，大大降低了学习成本，极大地提高了性能，功能也非常强大，用户不需要详细地学习 WebGL，就能轻松创作出三维图形，是前端开发者研发3D绘图的主要工具。

简言之：Three.js就是能够实现3D效果的JS库

WebGL、Canvas、Three.js四者关系

WebGL：OpenGL + JavaScript

Canvas：WebGL + Canvas 2D

Three.js：一个基于WebGL封装的库

Three.js应用场景有哪些？

three.js广泛应用，在小游戏、产品展示、物联网、数字孪生、智慧城市园区、机械、建筑、全景看房、GIS等各个领域基本上都有three.js的身影。 只要你有 Web3D可视化的需求 ，基本上都可以首选学习Three.js。

5、Three.js教程：

领取完整版二三维WebGIS开发课程

Three.js搭建开发环境

Three.js起步案例

Three.js三维坐标系

Three.js基础变换

three.js三视图与视角

three.js中实现3D坐标系

three.js实现投影与变换

three.js中实现3D几何实体

three.js中实现纹理与材质

three.js中的着色器

three.js实现3D建模数据加载