开源 Web3D 工具 Kinema：浏览器内快速构建与测试游戏原型

过去，想要用 Three.js 制作一个 3D 游戏、Web3D 展厅或元宇宙世界，往往需要编写大量底层且繁琐的代码。开发者不仅要搞定渲染，还要手动处理物理碰撞、角色控制和交互逻辑，整个过程耗时耗力。

现在，情况有所不同了。近日，国外开发者开源了一个名为 Kinema 的框架。它几乎颠覆了传统的开发流程，让你无需安装庞大的游戏引擎，直接在浏览器中就能完成角色控制、物理交互、关卡编辑与渲染测试！

这个工具几乎涵盖了制作 Web3D 应用所需的所有核心功能，能将创意从“脑洞”变成“可玩 Demo”的迭代速度提升数倍。

体验地址：
https://kinema-play.vercel.app/

🌟 Kinema 是什么？为什么值得关注？

Kinema 并非传统意义上的“庞大游戏引擎”，而是一个极其轻量、高效的 「浏览器原生第三人称游戏玩法实验室」。

它的核心理念是：打破壁垒。它将原型开发、关卡编辑、渲染验证和兼容性测试全部浓缩到一个浏览器应用中，避免了开发者在 Unity/Unreal 与网页原型之间痛苦地反复切换。

🛠 硬核技术栈

• 核心语言：TypeScript
• 3D 渲染：Three.js (WebGPU 优先 + WebGL 双管线兼容)
• 物理引擎：Rapier
• 音频系统：Tone.js
• 构建工具：Vite

无论是独立游戏开发者、技术美术，还是 WebGPU/WebGL 的研究者，都能在这里实现 “一码多端、所见即所得”。

🔥 核心亮点：把浏览器压榨到极致

1. 🌐 真实浏览器运行时

原生支持 键盘/鼠标、手柄、移动端触控。写完代码无需复杂的打包编译，即时预览，真正做到“一次编写，多端验证”。

2. 🏗️ 内置“所见即所得”关卡编辑器

这是 Kinema 最惊艳的功能之一！

• 按下 F1 一键开启编辑模式。
• 支持画刷放置、导入 .glb 模型、变换 Gizmo（平移/缩放/旋转）。
• 支持撤销/重做（Undo/Redo）、保存与加载。
• 按下 Ctrl+P 直接无缝进入 Play-Test（游玩测试）模式，迭代效率拉满！

3. ⚡ WebGPU 优先，完美向下兼容

默认开启次时代 WebGPU 渲染管线，带来极致的性能与画面表现（如后处理、HDR环境映射）。同时提供 WebGL 回退路径——当检测到 Safari 或 Apple 设备时自动切换，完美兼容主流浏览器。

4. 🏃 完整的第三人称与交互系统

自带“满级”角色控制器！支持：

• 物理驱动的移动、跳跃、蹲伏。
• 高级交互：攀爬梯子、绳索荡秋千、开关门。
• 动作机制：物理抓取与投掷。
• 游戏化组件：检查点系统、危险物检测、收集品、UI 提示系统等一应俱全。

5. 🏎️ 载具与特效模块（VFX）

不仅能走路，还能“上车”！内置基于真实物理碰撞的可驾驶汽车与悬浮无人机。此外还集成了丰富的粒子系统和图形配置调试面板。

🎮 快速上手：3 分钟跑通你的 3D 世界

Kinema 目前自带了一个 “程序化展示走廊”，内含 14 个功能站台（车辆站、VFX 特效站、目标竞技场等），5 分钟即可体验全部核心功能。

💻 环境要求

• Node.js 20+
• npm 10+
• 现代浏览器（推荐 Chrome/Edge 以体验 WebGPU）

⌨️ 安装步骤

打开终端，依次输入以下命令：

# 1. 克隆仓库
git clone https://github.com/2600th/Kinema.git

# 2. 进入目录并安装依赖
cd Kinema
npm ci

# 3. 启动开发服务器
npm run dev

浏览器打开 http://127.0.0.1:5173 即可见证奇迹！

🕹️ 核心操作快捷键

• 鼠标点击画布：锁定指针并开启音频
• F1：打开/关闭关卡编辑器
• Ctrl+P (或 Cmd+P)：在编辑器中一键游玩测试
• ` (反引号)：呼出开发者调试面板

🔗 快捷传送门 (URL 参数直达)

想要直接测试特定功能？试试在网址后面加上这些参数：

• /?station=vehicles —— 直接空降【车辆演示站】
• /?station=vfx —— 直接空降【特效展示站】
• /?forceWebGL=1 —— 强制切换到 WebGL 兼容模式

🏗️ 开发者友好：清晰的架构与测试

Kinema 不仅适合个人验证创意，也为团队开发提供了极佳的代码架构参考。

• 领域驱动划分：源码目录路径别名清晰可见（如 @core, @character, @level, @editor），想改哪里一目了然。
• 全方位测试覆盖：配套 Vitest 单元测试、Playwright 浏览器自动化测试，以及 Biome 代码规范。确保每一次 PR 提交都能稳定回归验证。

结语：让浏览器成为你的游戏实验室

Kinema 提供了一种轻量、高效、现代化的原型解决方案。它让开发者摆脱了繁重的环境搭建和底层代码折磨，把宝贵的精力真正聚焦在创意与玩法机制的打磨上。

你甚至可以让 AI 编程助手识别这个项目，直接将其整合到自己的项目构想中。

传送门在此

GitHub 地址：
https://github.com/2600th/Kinema

如果你对这类能在浏览器中直接验证创意的开发工具感兴趣，欢迎到云栈社区参与更多技术讨论，探索前端与图形学的边界。