10 个令人惊叹的 Three.js 开源示例

这可能看起来很疯狂，但实际上您可以使用 JavaScript 构建 3D 对象。 大多数 Web 开发人员都依赖 Three.js 之类的库来完成此任务。

但这是一个如此详细的过程，并不是每个人都愿意去研究它。 现在，如果你对 3D JS 的东西感到好奇，最好的学习方式就是学习其他人。 这正是我制作这个画廊的原因。

这些是我可以在 CodePen 上找到的一些最好的 Three.js 项目。 它们具有一系列不同的风格和特征，可以让您的创意马达加速运转。

1.低聚地球

通过一个 HTML 元素和几十行 CSS/JS，我们拥有了开发人员 Sam Saccone 开发的这个低多边形地球。

一开始可能看起来并不多。 但这是我见过的比较突出的想法之一，它甚至使用了自定义动画效果。 陆地甚至从地球上伸出，使其外观更加逼真。

任何使用过 Three.js 的人都应该知道这有多棒。

它肯定比类似项目领先一步——主要是因为它的代码库更小。

2. 球体

这个奇怪的类似行星的项目也使用了 Three.js，效果非常好。 Spheres 在 Stylus 预处理器上运行，您可以看到它已导入 CSS。

它也可以在没有 HTML 的情况下运行——这确实让人眼前一亮。 它全是 JS，全是 3D，并且可以在每个现代浏览器中完美运行。

使用 JS 库中的几何函数，较小的球体在较大的球体上滑动。 这似乎很疯狂，这甚至是可能的，但这证明了我们在 CSS 方面已经走了多远。

3. 行星自转

深入了解小行星的想法，我们得到了由开发人员 Bryan Jones 创建的这个疯狂的旋转星系。

它也只使用了 Three.js 和一些基本的 CSS 来设计和组织行星。 不得不说，3D效果让人惊喜。 我仍然无法理解这样一个事实，即这些东西在典型的网络浏览器中是可能的！

但不可否认，如果您刚开始在 Three.js 领域工作，那么这个 CodePen 片段是一个很好的学习助手。

4. Three.js 中的 Treehouse Logo

在线学习资源 Treehouse 非常棒——尤其是对于新手而言。 他们的一位讲师 Nick Pettit 实际上使用 Three.js 创建了一个完整的 Treehouse 徽标。

让我说这件事太棒了！ 我从未见过这样的设置，也很少看到有如此详细评论的笔。 Nick 的代码让你更容易深入挖掘，找到你不理解的功能，然后在谷歌上寻找答案。

关于这个 3D 标志的一切都应该证明现代 JS 远未过时。

提示：尝试单击+拖动屏幕以旋转徽标。 好玩的东西！

5. 木桶

这是 Nick Pettit 仅使用纯 JS 代码开发的另一个疯狂片段。 没有 HTML，没有 CSS——一切都是通过 JavaScript 语言呈现的。

当然，这依赖于您可以在 JavaScript 中生成的 canvas 元素。 我自己也用过一点——但从来没有达到这个水平。 它显示了你可以用一个坚实的 3D 库做多少。

这也证明了尼克真的会教书。 这只是他的 CodePen 帐户中的众多示例之一——所有这些示例都有易于阅读的评论，供您随时学习。

6. Three.js + TweenMax

开发人员 Martand Kashyap 将 TweenMax 脚本与 Three.js 结合在一起，创造了这个疯狂的东西。

它是此列表中较为独特的笔之一，具有一些很酷的动画效果。 面板实际上看起来像平面的 2D 表面，但翻转动画创造了自然的 3D 效果。 如果你盯着它看足够长的时间，它会变得非常疯狂。

这实际上是基于 Martand 转换为 JavaScript 的动态图形项目。 我经常看到这种情况，而且令人印象深刻。

7.粒子星域

2D 表面上的运动概念让人想起各种视差设计。 你会在整个网络上找到这些，很多时候使用 JavaScript 中的实验性功能。

CodePen 的这个片段对于收集这些想法来说非常棒。 它有一个非常疯狂的动画，具有不同的缩放速度、横向平移和许多其他相关功能。

粒子是动态生成的，您可以单击页面上的任意位置进行放大。这感觉就像一个永无止境的空间虚空——就像我们生活的那个一样。但是这个是用纯 JS 代码创建的。

8. 哈姆立方体

如需更多旋转几何，请查看这些 Three.js 立方体。 它们在 Haml 模板语言和大约 100 行 JavaScript 上运行。

也许这个设计最令人印象深刻的部分是阴影效果。 您不会经常看到这种情况，但它是在浏览器中创建逼真的 3D 效果的最佳方式之一。

幸运的是，您可以通过 Three.js 处理这一切——使用正确的代码片段。 这个可以作为一个很好的模板来达到这个目的。

9. 正方体

Mike Fey 开发了这个在 3D 空间中渲染的极其复杂的 tesseract。 它实际上看起来更像是一个组织成 3D 空间的展开立方体——有点像立方体中的立方体。

但请注意，此演示需要大量库才能运行。 Mike 有五个不同的 JS 脚本，包括 jQuery、jQuery UI、ThreeJS、TweenJS 和一个 CubeJS 脚本。 后 3 个托管在他的个人网站上，应该可以免费访问。

我不能说这个项目在现实世界中会被证明是有价值的。 但是，如果您想深入研究 3D 空间几何，这将是一种极好的学习资源。

10. 3D碎片

开发人员 Tobias Duhr 构建了这些 3D 碎片作为 ThreeJS 中可能实现的示例。 它们就像前面提到的旋转立方体一样工作，除了形状不同并且阴影也消失了。

如果您不确定从哪里开始，我会认为这是学习 ThreeJS 的一个更简单的介绍。 当然，这不是一个教程，所以它不能像其他资源那样教你。

但是，仅仅通过研究这段代码，你就会对自己的工作产生一些新的想法。

11. 3D毕达哥拉斯树

这棵 3D 毕达哥拉斯树简直令人惊叹。 开发人员 Josep Llodra 仅用 150 行 JavaScript 代码以及 Three.js 库创建了这个项目。

它实际上是基于我之前提到的这个项目。 基本上，它将这些立方体构造成一个定义的形状，然后根据大小和位置组织它们。

如果你不确定可以用 Three.js 做什么，那么我希望这个画廊能提供一点灵感。 但是，如果您愿意四处看看，您总能在 CodePen 上找到更多信息。