LittleJS 现在同时支持 2D 和 3D 了

# LittleJS 现在同时支持 2D 和 3D 来源：https://frankforce.com/littlejs-is-2d-and-3d-now/ LittleJS 刚刚迎来了发布以来最大的一次更新\！它依然是那个小巧、快速、无依赖的 HTML5 游戏引擎\。现在，它还拥有一个完整的 3D 渲染器，可与你的 2D 游戏共用同一画布，以及内置关卡编辑器、开箱即用的粒子特效库、更快的核心，还有借助 AI 制作游戏的新工具\。 ## 同一个引擎中的 2D 和 3D 这是本次更新的重头戏\！网格和形状构建器、带碰撞检测的地形和体素地图、阴影贴图、彩色光源和聚光灯、雾、反射、粒子、拖尾、摄像机，以及可用于任意对象的自定义着色器\。3D 对象就是普通的 LittleJS 对象，拥有与 2D 对象相同的物理机制、子对象和计时器，因此两者可以自由混合：在 3D 场景上叠加 2D 界面，或者在 3D 世界中放入一个 2D 游戏\。 更喜欢用 Three\.js 渲染？也有对应的插件\！ 2D 也获得了不少新功能：全新的动态光照系统、单向平台、高速子弹的扫掠碰撞检测、视差图层，以及更高效的对象碰撞检测\。 [](https://frankforce.com/wp-content/uploads/2026/10/engine-screenshot-2.jpg)## 新工具 **关卡编辑器**，支持 2D 和 3D，直接内置于引擎中\。在调试构建中按 Escape 即可暂停游戏，直接编辑当前关卡，支持撤销、自动保存和预制体，然后继续游玩\。编辑器指南 (https://github.com/KilledByAPixel/LittleJS/blob/main/EDITOR.md)介绍了如何将它们打造成你自己游戏的编辑器\。2D 关卡以 Tiled JSON 格式加载和保存\。 **粒子特效库\。**火焰、烟雾、火花、爆炸、雨等，每种特效只需一行代码：`particleEffect\('fire', pos\)`，可用于 2D 或 3D\。每种特效都支持缩放、色相和饱和度参数，粒子设计器 (https://killedbyapixel.github.io/LittleJS/examples/particles/)可用于调整它们或创建新的特效\。大多数游戏都无需再寻找其他粒子工具\。 **示例浏览器**收录了 100 多个简短示例，每个示例都是一个独立文件，说明展示的内容及其工作原理，并支持实时编辑，还有一个“分享”按钮，可将你编辑后的代码放进链接中\。这是学习引擎的最佳起点\。 [](https://frankforce.com/wp-content/uploads/2026/10/2026-10-04-14_26_59-LittleJS-Example-Browser.png)## 更快了 渲染核心经过重构：在 WebGL2 上批量渲染 2D 精灵、实例化 3D 绘制，并大幅减少每次绘制的开销\。为了衡量性能，我制作了 WebGL Engine Bench (https://github.com/KilledByAPixel/webgl-engine-bench)：让 LittleJS、PixiJS、Three\.js、PlayCanvas、Phaser 和 Babylon\.js 分别运行相同的两个场景——移动的精灵和带光照的立方体——并报告各引擎在 60 fps 下能够承载多少个对象\。 在我的机器上，LittleJS 的表现与其他引擎最快的渲染方式相当，并在其中几项测试中领先\。这毕竟只是一台机器和两种工作负载，所以请在你自己的机器上运行测试：它可以直接在浏览器中运行，无需安装任何东西，也欢迎其他引擎的维护者提供测试结果和场景改进\。 [](https://frankforce.com/wp-content/uploads/2026/10/ljsfast.png)## 为 AI 而打造 LittleJS 的 API 精简且文档完善，所有内容都集中在一个参考文件 (https://github.com/KilledByAPixel/LittleJS/blob/main/REFERENCE.md)中\。这恰好是编程 AI 擅长处理的形式，也同样方便人们阅读\。因此，支持 AI 现已成为一项核心目标： - LittleJS AI 工具包 (https://github.com/KilledByAPixel/LittleJS-AI)：为各种编程 AI 提供起始模板、辅助模块和智能体指令，包括 Claude Code、Copilot、Codex 或 Cursor\。 - **Claude Code 插件**只需两条命令即可安装\。提出游戏需求，就能得到一个完整、可玩的项目，包含引擎，无需服务器，也无需 npm install，直接打开文件即可运行\。由于引擎已经负责渲染、输入、物理和音频，AI 可以把精力投入到你的游戏本身\。 - LittleJS GPT (https://chatgpt.com/g/g-67c7c080b5bc81919736bc8815836be6-littlejs-game-maker)可在 ChatGPT 中制作游戏，完全无需编写代码\。 - LittleJS Arcade (https://killedbyapixel.github.io/LittleJSArcade/)：以这种方式制作的 50\+ 款小游戏，全部开源，都可以用作起始项目\。 ## 为什么？ LittleJS 从一开始就旨在成为一个通用引擎，让我能用它制作自己的所有游戏\。我有意让它从小规模起步，以 js13k 作为试验场，因为从第一天起就让核心保持精简，才能让引擎易于学习、运行快速\。 此后的一切都建立在这个核心之上：大家想用它制作越来越有雄心的作品，而需求最多的就是 3D 和工具\。我希望 3D 部分用起来与 2D 部分完全一致，使用相同的对象、相同的循环和同样精简的 API，而不是额外拼接一个独立框架\。 另一个原因是社区\。LittleJS 已经不再是一个人的项目：引擎修复、插件、示例和大量游戏都来自其他贡献者，而推动引擎进步的最好方式，就是让大家用它制作作品\。第三届 LittleJS Game Jam (https://itch.io/jam/littlejs-jam)正在进行，时间为 10 月 2 日至 11 月 2 日\。来做点东西吧\！ [](https://frankforce.com/wp-content/uploads/2026/10/arcade-games-collage.jpg)## 试试看\！ - 示例 (https://killedbyapixel.github.io/LittleJS/examples) - 文档 (https://killedbyapixel.github.io/LittleJS/docs) - GitHub (https://github.com/KilledByAPixel/LittleJS) - Discord (https://discord.gg/zb7hcGkyZe) 新网站 littlejsengine\.com (https://littlejsengine.com/)演示了所有这些功能：乘坐一列由引擎驱动的火车，沿途体验每一项功能\。 感谢阅读\！如果你喜欢这个项目，请在 GitHub 上给我们点一颗星\。🚂 --- ---