Three.js基础入门介绍——Three.js学习一【学习路线】

Three.js基础入门介绍

1.
深入了解Three.js前提下需要知道：【OpenGL和WebGL】

• 1. OpenGL是一个跨平台的3D/2D的绘图标准（规范）。

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

• 2. WebGL（Web Graphics Library）是一种3D绘图协议。

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

总结：WebGL允许把JavaScript和OpenGL 结合在一起运用，但使用WebGL原生的API来写3D程序非常的复杂，同时需要相对较多的数学知识，对于前端开发者来说学习成本非常高。

• 3. Canvas是HTML5中的标签，它是一个容器，可以使用JS在其中绘制图形或文字。

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

2.
Three.js是什么？

Three.js是基于webGL的封装的一个易于使用且轻量级的3D库，Three.js对WebGL提供的接口进行了非常好的封装，简化了很多细节，大大降低了学习成本，极大地提高了性能，功能也非常强大。

3.
OpenGL、WebGL、Canvas、Three.js 四者关系

• OpenGL：3D绘图标准

• WebGL：OpenGL + JavaScript

• Canvas：WebGL + Canvas 2D

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

类似于：

• ECMAscript：脚本语言规范

• JavaScript：脚本语言

• jQuery: 一个基于JavaScript封装的库

4. three.js应用场景有哪些？

• Web 3D游戏
• 3D物体模型展示
• 数据可视化
• Web VR

Three.js学习一【学习路线】

前期准备

• 前端基本功 – HTML+CSS+JS ，至少会写需要引入入外部JS的单页HTML
• Three.js 概念 – Three.js是基于原生WebGL封装运行的三维引擎，在所有WebGL引擎中，Three.js是国内文资料最多、使用最广泛的三维引擎。

入门Three.js

直接跟着官方文档走就好，官网的内容一般是跟着Three跟新的点击进入官网文档

官网可以切换中文文档，但是这里也有一个中文教程地址（貌似没怎么更新了，不过参考基础的概念信息还是可以的）：点击进入中文官网

尝试跟着写页面，我们发现基于Three.js写页面的三要素是：场景(Scene)、相机(Camera)、渲染器(Renderer)

熟练掌握
官网提供了很多examples，里面找到自己想要的效果进行学习，或者有计划的可以一个个研究官网链接

深入研究
Three.js是开源的，官方在Github上发布了资源点击进入链接