gltf,glb,fbx,usdz 模型下载

1、WebGL 简介

技术在进步，如果半年不学习新技术，那么我就落后了。本教程将带你进入一个全新的技术世界，它叫做 WebGL。

我非常激动，WebGL 给了我很多灵感。让我去创造一个三维的世界，去创造一个神奇的网站或者游戏。最为神奇之处是它能够在浏览器上运行。

随着数月的流逝，我们想一想 90 年代的浏览器，它只能显示简单的文字和图片；大约在 2000 左右，浏览器已经能够显示丰富的多媒体信息了；但是相对与传 统的桌面程序来说，它还是有一些不足，例如，很难写出高质量的三维程序。

但是现在，有了 WebGL 规范，一切都成为可能。越来越多的浏览器开始全方位的支持 WebGL 了。使用 Chrome 浏览器打开下面的例子看一看，你就会知道我要告 诉你什么了。

此例子如此精彩，以至于我们深深的被其吸引。看了这个例子后，你也许急于想知道这个效果是怎么实现的，别急，在以后的课程中我们会这其原理进行剖 析。

最后，我们用自己的话总结一下，什么是 WebGL。WebGL 是在浏览器中实现三维效果的一套规范。

使用 WebGL 原生的 API 来写 3D 程序是一件非常痛苦的事情，幸好，有很多同行花业余时间写了一些 WebGL 开源框架，其中 three.js 就是非常优秀的一个，它掩 盖了很多麻烦的细节，那么，就让我们一起来看看，什么是 three.js 吧

3、What is Three.js

什么是 threejs，很简单，你将它理解成 three + js 就可以了。three 表示 3D 的意思，js 表示 javascript 的意思。那么合起来，three.js 就是使用 javascript 来写 3D 程序的意思。

Javascript 是运行在网页端的脚本语言，那么毫无疑问 Three.js 也是运行在浏览器上的。

看到这里，也许你就开始有很多疑问了，那么让我来猜猜你的疑问吧。

疑问

1、javascript 能写高效率的 3D 程序吗？

能。技术在进步，几年前也许这是不行，写 3D 程序，最好是用 c++，这样才能保证效率，但是现在，世界改变了。javascript 的计算能力因为 google 的 V8 引 擎得到了迅猛的增强，做 3D 程序，做服务器都没有问题。如果你对服务器感兴趣，你可以看看 nodejs，当然，不是现在。现在，你最好保持热情，将 Three.js 学精深，在以后的工作学习中做出 更大的成绩。

2、javascript 不是在浏览器上运行的吗，那怎么能写 3D 程序呢？

是的，不错 javascript 是在浏览器里运行的，但是没有说 3D 程序就不能在浏览器上运行。

浏览器对 3D 的支持，是一个激动人心的特性，现在，是的，就是现在，你可以写基于浏览器的 3D 应用了。

提示： 好的 3D 应用，在腾讯开放平台上，会有一个不错的收入。腾讯开发平台是通过广告和访问量来收费的，你可以写一个好的 3D 应用，就能够挣一些钱了。

4、Threejs 能做什么

一言以蔽之，它能写出在浏览器上流畅运行的 3D 程序。

在美的文字，也比不上图片，所以我们喜欢看美女，而不是美文，嘿嘿。相信读这篇文章的男性是多于女性的，所以，我不撒谎，美女我也喜欢。

让我们看一些图，来领会一下，Threejs 能做什么？

这些就是 Threejs 能做的事情，我向你保证，完成这些事情，会比 c++ 用更少的代码。而且更容易，更酷。 在本课程中，我们将由浅入深的讲解这些效果的实现，这能让你迅速提高开发技能，在职场中处于不败之地。

5、Threejs 源自何方

它源自 github 的一个开源项目，发展相当迅速，现在已经发展到 r73 版了。(读者阅读时，可能更新)

1、下载

先去下载代码，它的地址是： https://github.com/mrdoob/three.js。 如图所示：

6、剖析源目录结构

要了解事物的真相，就要解析到它的深处去，我们来看看 Three.js 的源目录结果。用解压软件解开刚才的源码包，各个目录如下所示：

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 文件：版权信息。

README.md 文件：介绍 three.js 的一个文件，里面还包含了各个版本的更新内容列表。

7、配置你的开发环境

在 QQ 群里，很多朋友经常问一些关于开发环境的问题，我们在这里回答一下：

1、为什么我的浏览器不能运行 Three.js？

Three.js 本质上是 Webgl，如果你的浏览器不支持 Webgl，那么肯定你就不能完整的运行 Three.js。支持 Webgl 的浏览器很多，例如 Chrome、FireFox、360 安 全浏览器 6.0 等，而 IE 浏览器对 Webgl 标准的支持就不太好。所以我们推荐使用 Chrome 浏览器

2、javascript 用什么工具开发比较好，可以有智能提示？

老实说，并没有太好的 javascript 开发工具。我们曾经试过很多种 javascript 开发工具，例如 Dreamweaver、Visual Studio、Zend Studio、Notepad++、 Eclipse 等。发现都不好用，没有太好的智能提示，使用起来特别麻烦。直到遇到了 WebStorm，才心花怒放，一见钟情，从此开发 javascript 再也没有离开过 WebStorm。 在工具的使用上，我走了很多弯路，浪费了很多眼球细胞，所以你就不要在这上面多费时间了，我估计能节约你 5 天的时间吧。 你可以到百度里去寻找 WebStorm，然后下载它，

3、各位大侠，Three.js 怎么调试啊？

这也是我遇到的一个问得最多的问题。按照一般的思路，在集成开发环境里面就能够运行调试，所以应该在 WebStorm 中就能够调试，但是这里我不推荐这样 ，因为配置起来比较麻烦，没有必要在这里浪费时间。 所以，我们使用 Chrome 浏览器自带的功能调试代码。

8、第一个例子

Three.js 引擎怎么嵌入网页中，让它运行起来呢？很简单，只要 html 文件中引入 three.js 文件就可以了。代码可以在【初级教程 \chapter1\1-1.html】中找 到，如下：

这里黑体部分表示引入了 three.js 文件，这个文件会自己初始化 threejs 的一些变量和环境。如果 https://raw.github.com/mrdoob/three.js/master/build/three.js 这个文件无法下载，可能是无法访问 github 的原因，你可以下载初级课程的源码，并更改一下这个 js 引用地址就可以了。

为了验证 Threejs 确实启动，我们用 Chrome 浏览器打开上面的那个网页，浏览器里面什么都没有，这时按 F12 键，打开调试窗口，并在 Console 下输入 THREE.REVISION 命令，得到 73，这表示现在使用的 three.js 文件的版本是 73。这个过程的主要截图如下所示：

这样，就说明 Three.js 确实运行起来了。实践永远出真知，现在你就来试一试吧。