Three.js入门

以前，创建3D动画的过程成本高昂，耗时且需要大量学习。 到现在！ 多亏了Three.js，浏览器中的3D动画现在比以往更加可行。

在Three.js之前，您必须使用具有内置编程语言的特殊3D程序（Maya，Blender等）来创建和导出视频或编译新的独立应用程序。 这些程序将访问图形处理单元（GPU），并使计算机能够在原本不可能的帧上渲染诸如阴影，反射和大气失真之类的东西。 最重要的是，浏览器中需要一个插件或扩展程序才能查看3D图形。

由于WebGL在浏览器中的出现和实现，所有这些限制已成为过去。 当Alec Sloman向我们介绍Three.js的奇迹时，请在下面观看！

你玩过Three.js吗？ 您是否认为自己拥有所有可以自行测试驾驶的工具，现在就试试吧？

rel="stylesheet" type="text/css" href="http://learnable.com/stylesheets/jumpcast.css"/>

开始使用ThreeJS

有关JumpCast转录以及更多类似内容，请访问Learnable

Jess：我和99Designs的Web开发人员Alec Sloman在一起，Alec今天将向我们介绍Three.js。 Three.js到底是什么？

亚历克（Alec）：Three.js是一个Javascript库，允许Web开发人员将3D内容直接绘制到Web浏览器中，直到最近，这是我们无法做到的，直到最近，这才是真的很难做到的事情做。 基本上，这是在网络浏览器中绘制3D的一种非常简单的方法。

杰西：那么Three.js来自哪里？

Alec：Three.js是由一个叫Doob先生的人开发和维护的，但最初是在Mozilla进行的一次实验。 在2007年，他们试图找到一种将3D内容绘制到新引入的canvas HTML元素中的方法，最终，这些实验被Chronos小组接管。 Chronos小组于2011年将称为WebGL的这项技术稳定发布。

杰西：Three.js可以带给您什么样的项目？

亚历克（Alec）：几乎可以想象得到的一切，凡是对3D建模都很酷的事物。 最终的结果是，作为Web开发人员，我们的工具包中已经有很多技术，但是我们大多数人至少会知道一种服务器端语言，例如PHP。 我们大多数人至少会知道一些Javascript。 这使我们能够使用已知的技术来驱动3D可视化。 这就是它的真正力量。 它为我们提供了能够立即执行此操作的工具。

杰西：您需要什么样的背景知识来开始这类事情？

亚历克（Alec）：关于Three.js的很酷的事情是，您真的不需要了解3D开发通常会附带的很多底层知识。 您可能只需要了解一点点HTML，一些Javascript甚至是一些jQuery就可以得到。 幸运的是，该库以对初学者友好的方式编写。

杰西：如果我想了解更多有关这方面的知识，该从哪里开始？

Alec：Google可能是您最好的起点，但是更具体地说，有一个名为Learning Three.js的网站，我认为它实际上可能是由Doob先生亲自编写的。 另外，如果您遇到任何问题， Stack Overflow都有一个非常活跃的社区，他们正在讨论Three.js，实际上，至少有几个人也可以考虑退房。 通常，在线上有很多关于Three.js的资源，而且很容易找到。

杰西：您能给我们看一个生动的Three.js示例吗？

亚历克：好的。 实际上，在线上有很多非常可爱的示例，因此让我们看一下其中的一些示例。

杰西：让我们这样做。

亚历克（Alec）：在这里，我将展示几个使用Three.js的示例。 我将从简单到更高级，您将看到可以用它完成一些非常酷的事情。 我认为，对于大多数甚至具有一点开发经验的人来说，更基本的例子是可以实现的。 随着我们的前进，您可以看到实际上可以使用它构建非常复杂的应用程序。 从此开始，这只是将两个旋转的多维数据集放入场景中并以不同的纹理进行照明。 同样，这可能用不到50行代码编写。 您可以看到这里有两个对象对鼠标的移动有反应，每个对象都有自己独特的纹理，并且这些纹理都是内置的。 我的意思是，这是一个更基本的示例。

往前走，您可以看到月亮实际上在绕地球旋转。 这是一个使用两个内置几何然后使用您自己的纹理贴图的示例，并且在网络上可以使用很多这样的纹理贴图。 如果您使用Google搜索“地球纹理图”，则可以找到它们并使用内置的加载库来创建图像纹理图并将其应用于您的几何图形，然后可以使用一些内置的地图函数来做这些轨道您可以在这里看到，然后，当然，使用点光源，我们实际上具有有意义的照明。 我不确定，这甚至可能给它蒙上阴影。 您可以四处移动。 Three.js库中有很多非常好的部分，使您无需编写太多代码即可进行此类交互。

您在这里变得更加复杂。 您拥有这些非常好的粒子发生器，因此您可以对悬浮在太空中的物体进行令人难以置信的迷宫。 这可能会更高级。 现在，我们使用各种后期处理滤镜，进入更精美的动画场景，这是Three.js的另一个非常酷的功能。 这些纹理很多，实际上是这里的平坦地形，使用各种非常酷的字体图和镜面图来完成相当逼真的3D效果。 同样，它只是在Google Chrome中运行。

对于喜欢冒险的人以及有更多时间的人，您甚至可以实施完整游戏。 因此，让我们尝试一下。 从休闲模式开始。 让我们看看加载需要多长时间。 希望您可以编辑加载顺序，如果我假设正确的话，可以编辑其他类似内容。

杰西：嗯。

亚历克（Alec）：这是您的想法吗？

杰西：完美。 正是我在想的。

亚历克：甜。 甚至这个加载屏幕都是正在运行的Three.js的示例。 您可以在这里看到，您已经在我们所有的几何图形上绘制了难以置信的详细地图，您拥有一些内置的物理原理，这又是在此Macbook Air的GPU上运行的实际3D应用程序。 就在浏览器中。 您可能会发现，可能会在几年内，浏览器将成为提供3D体验的完美合法方式。 无论如何，这只是Three.js实际应用中的几个例子，希望您喜欢它。 谢谢。

杰西：非常感谢您的宝贵时间，亚历克。 这是Learnable.com的Jess Brown。

From: https://www.sitepoint.com/get-started-with-three-js/