你可能会认为 3D 游戏比 2D 游戏更难开发，因为你需要考虑额外的维度，但实际上比你想象的要容易。我们最近更新了 MDN 上的游戏部分，其中包含一系列关于 3D 开发的教程，重点介绍了为网页构建游戏的开发者提供的捷径框架，这些开发者不熟悉 WebGL。

WebVR 和 3D 游戏开发

今年，浏览器中的虚拟现实取得了长足的进步，被称为 WebVR 的 JavaScript API 正在开发中。WebVR 规范正在走向 1.0 版本。这将是浏览器中虚拟现实技术的一个巨大里程碑。随着 WebVR API 的成熟，将是时候从“实验性”演示转向严肃商业游戏和应用程序的“生产就绪”阶段了。

基于 Three.js 构建的 A-Frame 框架 正在 迅速发展。已经有了一些有趣 VR 项目的案例研究，比如 Cardboard Dungeon 和 SECVRITY。该框架本身已经达到了 0.2.0 版本，并正在社区中迅速获得关注。它简单而强大的方法使用标记创建跨平台和设备的 VR 体验。结果：每天都有新的教程、演示和插件被创建。

对于尖端的 VR 实验来说，这些都是令人兴奋的时刻，但是如果你像我一样是 2D 游戏的粉丝，那么进入第三维度可能是一个挑战。让我们一起探索 3D 的基础知识，看看一些流行的框架如何帮助你更快地实现目标，并创建令人印象深刻的游戏和演示。

网络上的 3D 游戏 的概念从根本上来说是关于在 画布 上 渲染 WebGL 以创建硬件加速的丰富交互式动画。基本理论围绕着渲染管道，它管理你创建的信息并在屏幕上显示它们。

3D 游戏开发框架概述

你可以使用纯 WebGL 自己完成所有这些，或者你可以让你的生活更轻松，加快开发速度，并专注于游戏创意的重要部分，可以使用各种可用的框架。MDN 游戏教程包括

• 使用 Three.js 构建基本演示
• 使用 PlayCanvas 构建基本演示
• 使用 Babylon.js 构建基本演示
• 使用 A-Frame 构建基本演示
• GLSL 着色器

Three.js 是 WebGL 动画最流行的工具，而 PlayCanvas 提供了使用 PlayCanvas 引擎 或 在线编辑器 构建游戏或演示的选项。Babylon.js 通常因其简单的 API 和强大的功能而被选中。A-Frame 框架也可以用于构建可以在虚拟现实中立即查看的 3D 世界的快速原型。我们还提供了教程来涵盖着色器等基本概念。了解框架背后的工作原理，可以让你更好地控制你的游戏在应用所有后期处理后的外观。

框架的优势

使用游戏开发框架有哪些优势？框架提供优势和捷径。以下是一些例子

你可以卸载与创建游戏的其他部分相比感觉重复的工作：加载资产、渲染场景或在屏幕上绘制所有内容。你无需管理相机、灯光等的特定配置。相反，你可以创建一些几何图形，添加动画，然后忘记其他所有事情 - 它会自动工作，你将立即看到你的作品。

你无需担心浏览器实现功能的差异 - 框架会为你处理这些，并在一个简单的高级 API 中为你公开。

框架增加了一层额外的抽象，因此你可以编写更少的代码，用更少的代码做更多的事情。框架可以帮助你专注于游戏的核心机制。有时几行特定于框架的代码可以做到与几十行纯 JavaScript 实现完全相同的事情。（请记住，情况并非总是如此。）

不同的框架提供不同的体验：Three.js 通常用于创建动画；另一方面，Babylon.js 专注于创建游戏。它还可以为你处理抗锯齿。这两个框架都可以成功地用来创建游戏，因此选择真正取决于你的偏好和项目目标。

有些框架甚至添加了额外的功能层，并提供了内置的物理引擎、碰撞检测或粒子系统。所有这些基础设施都可以在你的项目中使用，而无需解决使用自定义插件或从头开始编写这些功能的兼容性问题。

使用框架更易于启动和快速原型化场景 - 它们提供低复杂度来构建复杂的作品。看看 纯 JavaScript 中的 2D Breakout 游戏 的源代码比 Phaser 中的相同游戏 更长更复杂。使用框架可以节省你的时间，这样你就可以专注于实际构建独特的东西。

总结

另一方面，学习语言首先是好的，这样你才能知道框架是如何构建的，为什么这样而不是那样，以及如何在框架无法完全满足你的需求时扩展它们。框架的流行趋势会来来往往，学习它们的语法可能需要额外的努力。毕竟，你总能自己用纯 JavaScript 编写简单的功能 - 这是一项强大的技能。

查看 我的 GitHub 存储库，其中包含一系列演示，展示了如何使用给定的工具构建简单的 3D 场景，或者在线查看它们 在线.

请记住：你无需使用任何特定的框架，并且可以使用纯 JavaScript 和 WebGL 达到可比的结果。上面显示的演示被选中来说明如何使用目前最流行的工具。如果你认为我遗漏了什么，你可以写下来并将它添加到上面的 GitHub 3D 演示集合中 - 欢迎所有贡献。如果我没有包含你最喜欢的框架，你可以在下面的评论中建议它，或者自己写一个介绍，这样更多人就会知道它。

你可以随意使用源代码 - 例如作为新 3D 项目的样板 - 并记得向我们展示你在其基础上构建的内容！我们很乐意在评论中或 GitHub 存储库中收到你的来信。