Three.js 基础入门

Posted 2020-12-16 牧童遥指杏花村

课程介绍

近些年，浏览器的功能越来越强大，渐渐得成为了复杂应用和图形的平台。同时，现有大多数浏览器实现了对 WebGL 的支持，但要直接使用 WebGL 相关接口进行开发，则需要学习复杂的着色器语言，且开发周期长，不利于项目的快速开发。

面对这种情况，Three.js 应运而生，它不但对 WebGL 进行了封装，将复杂的接口简单化，而且基于面向对象思维，将数据结构对象化，非常方便我们开发。Three.js 的发展十分迅速，然而配套的学习材料却比较匮乏，于是便有了当前的这个课程。

本课程作为入门课程，不会深入做源码解析，主要协助初学者了解 Three.js 的数据结构，基础 API 以及相关辅助插件的使用。帮助初学者达到快速入门的目的。

本课程共包含四大部分。

第一部分（第01-02课），入门前概述，带你初步认识 Three.js、框架选择标准、开发工具，源码获取，实现一个“Hello World”辅助工具。
第二部分（第03-08课），基础功能篇，主要包括 Object3D、Scene、Mesh、Group、Geometry、Materials、Lights、Cameras、粒子等相关功能的介绍。
第三部分（第09-15课），进阶篇，主要包括 Controls、Loaders、Animation、Tween、核心对象，与场景之间的交互以及性能优化介绍。
第四部分（第16课），实战篇，带大家利用所学知识实现一个 3D 小案例。
作者简介
郑世强，现就职于上海某网络公司担任前端工程师，CSDN 博客作者，长期活跃于各大论坛，擅长前端开发、WEBGL 开发。

课程内容

第01课：入门前准备
什么是 WebGL？
WebGL（Web 图形库）是一种 javascript API，用于在任何兼容的 Web 浏览器中呈现交互式 3D 和 2D 图形，而无需使用插件。WebGL 通过引入一个与 OpenGL ES 2.0 紧密相符合的 API，可以在 html5 <canvas> 元素中使用（简介引自 MDN）。

以我的理解，WebGL 给我们提供了一系列的图形接口，能够让我们通过 JavaScript 去使用 GPU 来进行浏览器图形渲染的工具。

什么是 Three.js？
Three.js 是一款 webGL 框架，由于其易用性被广泛应用。Three.js 在 WebGL 的 API 接口基础上，又进行的一层封装。它是由居住在西班牙巴塞罗那的程序员 Ricardo Cabbello Miguel 所开发，他更为人知的网名是 Mr.doob。

Three.js 以简单、直观的方式封装了 3D 图形编程中常用的对象。Three.js 在开发中使用了很多图形引擎的高级技巧，极大地提高了性能。另外，由于内置了很多常用对象和极易上手的工具，Three.js 的功能也非常强大。最后，Three.js 还是完全开源的，你可以在 GitHub 上找到它的源代码，并且有很多人贡献代码，帮助 Mr.doob 一起维护这个框架。

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

用最简单的一句话概括：WebGL 和 Three.js 的关系，相当于 JavaScript 和 jQuery 的关系。

功能概述

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

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

官网文档非常粗糙，对于新手极度不友好。
国内的相关资源匮乏。
Three.js 所有的资料都是以英文格式存在，对国内的朋友来说又提高了门槛。
Three.js 不是游戏引擎，一些游戏相关的功能没有封装在里面，如果需要相关的功能需要进行二次开发。
Three.js 与其他库的对比
随着 WebGL 的迅速发展，相关的 WebGL 库也丰富起来，接下来介绍几个比较火的 WebGL 库。

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

Three.js 比较全面，而 Babylon.js 专注于游戏方面。
Babylon.js 提供了对碰撞检测、场景重力、面向游戏的照相机，Three.js 本身不自带，需要依靠引入插件实现。
对于 WebGL 的封装，双方做得各有千秋，Three.js 浅一些，好处是易于扩展，易于向更底层学习；Babylon.js 深一些，好处是易用扩展难度大一些。
Three.js 的发展依靠社区推动，出来的比较早，发展比较成熟，Babylon.js 由微软公司在2013推出，文档和社区都比较健全，国内还不怎么火。
与 PlayCanvas 对比
PlayCanvas 是一个基于 WebGL 游戏引擎的企业级开源 JavaScript 框架，它有许多的开发工具能帮你快速创建 3D 游戏。与 Three.js 之间的对比：

PlayCanvas 的优势在于它有云端的在线可视化编辑工具。
PlayCanvas 的扩展性不如 Three.js。
最主要是 PlayCanvas 不完全开源，还商业付费。
与 Cesium 对比
Cesium 是国外一个基于 JavaScript 编写的使用 WebGL 的地图引擎，支持 3D、2D、2.5D 形式的地图展示，可以自行绘制图形，高亮区域。与 Three.js 对比：

Cesium 是一个地图引擎，专注于 Gis，相关项目推荐使用它，其它项目还是算了。
至于库的扩展，其它的配套插件，以及周边的资源都不及Three.js。
总结
通过以上信息我们发现，Three.js 在其库的扩展性，易用性以及功能方面有很好的优势。学习 Three.js 入门 3D 开发不但门槛低，而且学习曲线不会太陡，即使以后转向 WebGL 原生开发，也能通过 Three.js 学习到很多有用的知识。

现在最火的微信小游戏跳一跳也是在 Three.js 的基础上开发出来的。所以，Three.js 是我们必须要学的 WebGL 框架。

入门前准备

浏览器兼容
Three.js 可以使用 WebGL 在所有现代浏览器上渲染场景。对于旧版浏览器，尤其是 Internet Explorer 10 及更低版本，您可能需要回退到其他渲染器（CSS2DRenderer、CSS3DRenderer、SVGRenderer、CanvasRenderer）。

注意：如果您不需要支持这些旧版浏览器，则不推荐使用其他渲染器，因为它们速度较慢并且支持的功能比 WebGLRenderer 更少。

支持的浏览器版本
主要有：Google Chrome 9+、Firefox 4+、Opera 15+、Safari 5.1+、Internet Explorer 11 和 Microsoft Edge。

开发工具
Three.js 是一个 JavaScript 库，所以，我们不需要搭建复杂的开发环境，只需要有一个可以编辑 JavaScript 的编辑器和支持 Three.js 的浏览器就可以使用 Three.js 来创建 WebGL 应用。在这里推荐两款编辑器，之所以在这里只推荐这两款编辑器，因为它们自带 Web 服务，不需要我们再搭建复杂的 Web 服务进行开发：

WebStorm：WebStorm 是 JetBrains 公司旗下一款 JavaScript 开发工具。目前已经被国内广大 JavaScript 开发者誉为“Web 前端开发神器”、“最强大的 HTML5 编辑器”、“最智能的 JavaScript IDE”等。与 IntelliJ IDEA 同源，继承了 IntelliJ IDEA 强大的 JavaScript 部分的功能。

HBuilder：HBuilder 是 DCloud（数字天堂）推出的一款支持 HTML5 的 Web 开发 IDE。它是国产的最好用的编辑器。它基于 Eclipse，所以顺其自然地兼容了 Eclipse 的插件。快，是 HBuilder 的最大优势，通过完整的语法提示和代码输入法、代码块等，大幅提升 HTML、JavaScript、CSS 的开发效率。

虽然现在浏览器基本上都已经支持 Three.js，但是我还是推荐使用 Google 的 Chrome 浏览器或者 Mozilla 的 Firefox（火狐浏览器）。当然，性能最好的还是 Chrome 浏览器，本课程所有代码都使用 Chrome 浏览器进行测试。

源码获取
Three.js（当前版本为 r92）提供了几种源码获取方式，在这里我介绍几种比较简单的方式。

第一种，使用 BootCDN 提供的免费 CDN 加速服务（同时支持 HTTP 和 HTTPS 协议），直接引入方式为：

<!DOCTYPE html><html> <head> <meta charset=utf-8> <title>我的第一个Three.js案例</title> <style> body { margin: 0; } canvas { width: 100%; height: 100% } </style> </head> <body> <script src="https://cdn.bootcss.com/three.js/92/three.js"></script> <script> // 在这里书写你的js代码 </script> </body></html>
如果需要更新代码，可以点击这里查找最新版本地址引入即可。

第二种，直接前往 Three.js官网：

点击下载链接即可下载当前最新版本的代码及相关案例，文件下载解压后是这样的：

 

其中相关文件夹的内容是：

build：里面含有 Three.js 构建出来的 JavaScript 文件，可以直接引入使用，并有压缩版；
docs：Three.js 的官方文档；
editor：Three.js 的一个网页版的模型编辑器；
examples：Three.js 的官方案例，如果全都学会，必将成为大神；
src：这里面放置的全是编译 Three.js 的源文件；
test：一些官方测试代码，我们一般用不到；
utils：一些相关插件；
其他：开发环境搭建、开发所需要的文件，如果不对 Three.js 进行二次开发，用不到。
还有第三种，就是直接去 GitHub 上下载源码，和在官网上下载的代码一样。

hello World
前面说了这么多，准备了这么多，最后，放上我们的第一个案例吧。由此来打开学习 Three.js 的大门：

<!DOCTYPE html><html><head> <meta charset=utf-8> <title>我的第一个Three.js案例</title> <style> body { margin: 0; } canvas { width: 100%; height: 100%; display: block; } </style></head><body onload="init()"><script src="https://cdn.bootcss.com/three.js/92/three.js"></script><script> //声明一些全局变量 var renderer, camera, scene, geometry, material, mesh; //初始化渲染器 function initRenderer() { renderer = new THREE.WebGLRenderer(); //实例化渲染器 renderer.setSize(window.innerWidth, window.innerHeight); //设置宽和高 document.body.appendChild(renderer.domElement); //添加到dom } //初始化场景 function initScene() { scene = new THREE.Scene(); //实例化场景 } //初始化相机 function initCamera() { camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 200); //实例化相机 camera.position.set(0, 0, 15); } //创建模型 function initMesh() { geometry = new THREE.BoxGeometry( 2, 2, 2 ); //创建几何体 material = new THREE.MeshNormalMaterial(); //创建材质 mesh = new THREE.Mesh( geometry, material ); //创建网格 scene.add( mesh ); //将网格添加到场景 } //运行动画 function animate() { requestAnimationFrame(animate); //循环调用函数 mesh.rotation.x += 0.01; //每帧网格模型的沿x轴旋转0.01弧度 mesh.rotation.y += 0.02; //每帧网格模型的沿y轴旋转0.02弧度 renderer.render( scene, camera ); //渲染界面 } //初始化函数，页面加载完成是调用 function init() { initRenderer(); initScene(); initCamera(); initMesh(); animate(); }</script></body></html>
请将上面的代码复制到 HTML 文件中，然后使用浏览器打开，我们就会发现下面的效果：

 

下一节我们将仔细分析案例的实现。

第02课：初识 Three.js
第03课：基础功能之 Scene 场景
第04课：基础功能之 Geometry 几何体
第05课：基础功能之 Material 材质
第06课：基础功能之 Light 光照
第07课：基础功能之 Camera 相机
第08课：基础功能之 Points 粒子
第09课：进阶篇之 Controls 相机控制器
第10课：进阶篇之使用 Loaders 加载模型到 Three.js
第11课：进阶篇之 Three.js 动画
第12课：进阶篇之使用 Tween.js 创建补间动画
第13课：进阶篇之 Three.js 场景交互
第14课：进阶篇之 Three.js 性能优化
第15课：进阶篇之 Three.js 核心对象
第16课：实战篇之人物操作案例
阅读全文: http://gitbook.cn/gitchat/column/5b320521bebc3c4bd7e72436