「这是我参与2022首次更文挑战的第2天，活动详情查看：2022首次更文挑战」

1. 介绍

1. 什么是 WebGl

WebGL是一项可以在浏览器中流畅展示3D模型和场景的一种技术。它使用javascript作为编程语言，调用浏览器支持的3D绘制函数，来实现3D模型和场景的展现。

2. 浏览器为什么能绘制3D世界

因为浏览器实现了opengl es的规范，这套规范可以直接使用指令操作显卡，使显卡渲染的3D世界，直接反应到浏览器中。

3. WebGl 能做什么

游戏
家居
虚拟现实
城市地图
CAD 制图

4. WebGl 和 three.js 的关系

Three.js 是一个封装好的 webgl 库，它使 WebGl 的学习更为简单。

2. 上手 three.js

首先到 github 下载源代码

1. 源码目录介绍

build目录：包含两个文件，three.js 和three.min.js 。这是three.js最终被引用的文件。一个已经压缩，一个没有压缩的js文件。
docs目录：这里是three.js的帮助文档，里面是各个函数的api，可惜并没有详细的解释。试图用这些文档来学会three.js是不可能的。
editor目录：一个类似3D-max的简单编辑程序，它能创建一些三维物体。
examples目录：一些很有趣的例子demo，可惜没有文档介绍。对图像学理解不深入的同学，学习成本非常高。
src目录：源代码目录，里面是所有源代码。
test目录：一些测试代码，基本没用。
utils目录：存放一些脚本，python文件的工具目录。例如将3D-Max格式的模型转换为three.js特有的json模型。
.gitignore文件：git工具的过滤规则文件，没有用。
CONTRIBUTING.md文件：一个怎么报bug，怎么获得帮助的说明文档。
LICENSE文件：版权信息。
brower.json: 是专门为前端表现设计的包管理器，一切全部为前端考虑的。npm 和bower 的最大区别，就是 npm 支持嵌套地依赖管理，而 bower只能支持扁平的依赖（嵌套的依赖，由程序员自己解决）
package.json: npm 包管理器
README.md文件：介绍three.js的一个文件，里面还包含了各个版本的更新内容列表。

2. 下载 r73 版本的 three.js

我们使用的版本是 r73，我们需要对应的 three.js 版本
然后找到 r73 的 tag

// 获取所有标签名称
git tag -l

然后切换到 r73 的 tag

git checkout r73

在 build 中 three.js 版本为 73

var THREE = { REVISION: '74' };

3. 在项目中引用查看版本

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./js/three.js"></script>
  </head>
  <body></body>
</html>

控制台打印版本

THREE.REVISION

ThreeJs 入门01-WebGL与three.js、opengl的关系