在浏览器里做 3D 创作同时让几个朋友实时协调整改还要求整套方案开源、能自己部署——这些条件凑在一起最后真正让我愿意投入时间折腾的还是 Superpowers。它不是某个教程视频里的噱头而是一套真实能跑起来的创作环境服务端用 Node.js 搭建编辑器和运行时都在浏览器里完成项目文件落在本地磁盘任何人只要通过同一个地址访问就能看到其他人新加的模型、改过的代码和正在播放的画面。这篇文章是我的真实上手记录内容覆盖安装步骤、核心用法、协作模式以及一些不太容易从文档里看到的坑适合正准备安装 Superpowers、想拿它做点小项目的人参考。如果你是因为“superpowers”这个词搜索进来的先花十秒确认一下目标本文讲的不是某个 IDE 插件而是同名开源项目 Superpowers一个可以自托管、带完整编辑器的多人 3D 创作平台。想装它的人通常不是需要一个更大的工具而是需要一个“大家能在一个世界里实时改东西”的空间这正好是它的主场。1. 它凭什么配叫 superpowers定位与核心架构1.1 和传统游戏引擎、三维软件很不一样的思路很多人第一次打开 Superpowers 的编辑器第一反应是“这怎么什么都没有”。它不像 Unity 打开就是一大排面板也不像 Blender 那样一上来就是网格编辑。它的默认状态就是一个空空的 3D 视图加左侧一棵场景树顶部一排极简工具按钮。但正是这种极简暴露了它的核心设计目标让“创建东西”的流程尽量短让协作成为默认选项而不是后装的模块。从技术定位上讲Superpowers 是一个运行在浏览器里的跨平台创作工具内置了场景管理、3D 渲染、资源导入和脚本系统。服务器的角色更像是一个“项目服务器”保存文件、分发同步消息、托管静态资源。所有项目内容包括场景数据、脚本源码、资源文件都保存在服务器所在机器的 Data 目录下。这意味着你完全可以部署一台自己的服务器所有编辑操作都发生在浏览器里团队成员不用安装任何客户端软件。这一点在今天看可能不算稀奇但要考虑到这个项目 2014 年左右起步当时“云端协作式开发环境”还是个相对小众的概念。它本质上把“多人实时同步”做进了底层两个人在同一时间打开同一个项目你拖一个方块进去对方的画面马上也会多出这个方块。如果你熟悉早期 Web 技术生态就会明白在浏览器里跑起一个 3D 编辑器、还带协作同步在当时的技术条件下已经是很激进的设计。下面这张表是我实际对比下来的结果方便你判断它适合的工作流对比维度SuperpowersUnity / GodotBlender自己搭 Three.js 同步服务安装成本极低一个 Node 服务 浏览器需要下载安装包体积较大中等需要自己写同步逻辑多人实时协作原生支持需第三方方案或手动同步协作较弱自己维护成本高写代码体验内置编辑器自动补全足够用需要外部 IDE 配项目主要靠节点没有内置编辑器最终产物Web 场景 / 原型 / 小游戏桌面/移动/Web 游戏模型与动画自由的 Web 项目扩展方式插件机制可改源码插件、包管理器插件生态成熟完全自由结论很直接如果你追求的是“低门槛、强协作、马上能看到效果”Superpowers 的组织方式几乎是为你量身定做的如果你要的是高级渲染、海量资源包和商业级性能那它并不合适。1.2 拆开看架构服务器、会话、插件各管什么要稳定使用 Superpowers先理解它的几个层次会比盲目点按钮高效得多。第一层是 Node.js 服务器。它负责身份识别、会话管理、项目数据读写以及把项目对外发布成能被浏览器访问的网页。每次打开项目浏览器会与服务器建立一个 WebSocket 连接后续你用编辑器做的几乎所有操作都会通过这个连接同步给其他在线客户端。第二层是浏览器端编辑器。它由项目自带的前端代码组成包括代码编辑器、3D 视口、场景树、资源面板等这些前端功能通过插件组合起来。第三层才是真正的功能来源——插件。Superpowers 本体只提供最基础的主机能力3D 渲染、音频、2D 精灵、物理模拟等能力都来自插件比如默认常用的 superpowers-game 插件就提供了 Box、Sphere、Camera、Light 等实体类型。理解这个结构之后你的使用心态会顺很多安装 Superpowers 等于安装了一个“宿主”而不是一个装满素材的成品软件。想要什么能力就去装对应插件装不上的甚至可以自己写一个插件挂上去。这也是它和“全家桶”式创作软件最大的不同。顺便说一句这项目现在的开发节奏比起最热闹的时期已经放缓了不少源代码和文档仍然完整日常使用完全没问题但别指望它像商业软件那样长期高频更新。把它当成一个成熟稳定的开源工具来看预期会更舒服。2. 本地安装动手实录从空目录到第一个项目2.1 环境准备与安装命令Superpowers 的安装流程比我预想的短。整个项目托管在 GitHub 上拿到源码之后只需要几个命令就能本地跑起来。我用的环境是 Node.js 16 LTS实际测试下来更早的 12、14 也都能正常工作如果你用的是偏新的 Node 18/20可能会在依赖编译阶段遇到坑后面第五节我会专门说。标准安装步骤# 克隆项目 git clone https://github.com/superpowers/superpowers.git # 进入目录 cd superpowers # 安装依赖 npm install # 启动服务器 npm start启动成功后终端会打印一行提示告诉你服务器监听在哪个端口默认是 8080。这时打开浏览器访问 http://localhost:8080就能看到 Superpowers 的引导界面。这里有两个容易忽略的小点。第一个是千万不要用 sudo 去安装这会给 Data 目录留下权限问题后续写文件会莫名其妙报错第二个是如果 8080 端口被你本地其他服务占用项目根目录的 config.json 里可以改 serverPort 字段改成任意空闲端口后重启即可。默认的 config.json 结构很简单通常只需要动这一项。2.2 引导页与创建第一个项目第一次打开编辑器页面会有一个很轻量的引导流程让你选择界面语言并创建一个项目。这里提醒一下项目名建议直接用英文因为项目路径会以这个名称作为目录名中文名称在部分系统环境下面会出现路径编码问题没必要冒这个险。创建项目后如果你只看到了一个空荡荡的 3D 场景别急着怀疑装错了——这是正常的因为默认插件只给了你一个基础世界还没有任何实体。在场景视口里按住右键拖动可以旋转视角按住 Shift 右键可以平移鼠标滚轮负责缩放。第一次进入的人建议先花五分钟把这三个操作试一遍后面所有创作动作都建立在“会控制视角”之上。这一阶段最常被问到的问题是“我什么都没做怎么判断装得对不对”我自己的判断标准很简单在左侧面板点击 Create创建如果能看到 Box、Camera、Light 这一组实体类型说明 superpowers-game 插件已经正常加载接下来照着下一节的方法加一个方块就完成了最基础的安装验证。3. 让一个方块转起来核心创作逻辑拆解3.1 实体、行为脚本、消息机制三件套我接触过不少引擎从 Unity 到 Godot 再到纯前端渲染库Superpowers 的编程模型其实不算新鲜但它把“实体 行为脚本 消息”这套东西组织得非常干净。在 Superpowers 中场景里的每个对象都叫 stuff你也可以理解成 Unity 里的 GameObject每个 stuff 可以挂多个行为脚本Behavior。行为脚本决定了这个对象会做什么、怎么响应输入、怎么和其他对象通信。一个典型的行为脚本长得像这样// 让对象持续旋转 class SpinBehavior extends Sup.Behavior { speed: number 0.02; update() { const angles this.actor.getLocalEulerAngles(); this.actor.setLocalEulerAngles(angles.x, angles.y this.speed, angles.z); } } Sup.registerBehavior(SpinBehavior);这个故事并不复杂Superpowers 提供的 Sup.Behavior 基类里有 update 生命周期每帧都会调用一次你在里面累加 Y 轴旋转量对象自然就转起来了。API 的具体名称在不同版本里可能有细节差异但整体思路完全一致。写完之后保存脚本会自动应用不需要重刷页面。除了生命周期Superpowers 还内置了消息机制这几乎是协作功能的基石。消息允许你在同一个项目会话里向其他行为、其他客户端广播数据。你可以把消息理解成“项目里的公共喇叭”A 客户端通过消息喊了一句话B 客户端的脚本能收到并做出响应。多人协同的各种玩法本质都是在这套消息机制上搭积木。3.2 添加灯光、相机与方块完成第一个联动理论讲完直接动手做一个最小的 3D 场景。第一步在左侧 Create 面板里创建一个 Camera相机、一个 Light灯光和一个 Box方块。创建之后场景视口里可以看到方块但如果没有相机3D 视图没有观察角度而没有灯光方块看起来是纯黑色。这也是新手最容易困惑的地方“我加了 Box 为什么看不到”通常就是因为漏了相机或灯。第二步把灯光稍微移动到方块上方一侧让明暗关系变得可见。选中 Camera把它的位置和朝向调整到能看清方块的角度。第三步选中 Box在右侧属性面板里点击 Add Behavior新建一个行为脚本把上面那一段旋转代码粘贴进去保存。保存的瞬间你会发现方块在视口里已经开始匀速旋转。这里的重点不是代码本身而是理解“保存即生效”的更新机制所有脚本修改都不需要重启服务器也不需要手动刷新页面只要保存服务器会把编译后的代码推送给所有在线客户端每个人看到的画面同步更新。我第一次体会到协作的威力正来自于这种流畅的实时反馈——它很难通过文字向你传递只有亲身打开两个浏览器窗口同时编辑同一个项目时才会明白。4. 多人实时协作与 LIVE 分享的正确打开方式4.1 协作启动两个浏览器窗口一个世界Superpowers 的协作几乎是零配置的。你启动服务器后把项目链接发给另外一个人对方访问后就能加入同一个项目会话。最简单也最稳妥的自测方式是同一个浏览器里开两个标签页都打开该项目地址然后在其中一个标签页添加一个实体另一个标签页会同步出现这个实体。第一次看到这个效果时我心里想的是这不就是一个面向 3D 场景的在线协作文档吗协作的背后是 Node 服务器在维护每个项目的全局状态并通过 WebSocket 把操作分发给所有订阅了该项目的客户端。文本编辑同样实时同步这意味着两个人可以同时修改同一个脚本文件的不同部分双方编辑器里会实时看到对方的改动。这一点和在线文档的体验很像但它是面向“3D 场景 代码”这个特殊对象设计的。要注意的是它做的是操作级同步不是版本管理式同步。不要假设它能解决代码冲突更合理的协作方式是提前分工比如你负责场景灯光和材质我负责角色控制脚本尽量避免同一时间修改同一段代码的高冲突操作。协作时一旦发生文件级别的直接冲突Superpowers 不会替你智能合并它更倾向于以最后一次保存为准。4.2 LIVE 链接把本地项目变成可分享的公网页面Superpowers 在编辑器里提供了一个叫 LIVE 或 Share 的能力作用是把本地运行的项目通过隧道暴露成一个公网链接。点开之后系统会生成一个随机地址别人访问这个地址就能直接打开你的项目看到实时运行画面甚至参与编辑——取决于你在分享时给的权限。我在实际使用中把 LIVE 链接用在两个场景一是快速向朋友演示一个交互原型不用打包、不用部署给个网址就行二是做小范围的多人创作直播几个人同时进入 URL一边改一边讨论效果很直观。不过要提醒一句LIVE 链接意味着你的项目暴露在公网上如果你只是想展示成品而担心别人乱改请务必把项目设置为只读或限制编辑权限否则任何人都可能通过链接修改你的项目内容。4.3 协作时需要养成的好习惯基于我踩过的一些教训总结三条可以“抄作业”的协作约定一人一个模块把场景里不同区域或不同资源的编辑分工清楚减少多人同时改同一文件的可能。重要改动先备份把 Data 目录整体纳入 Git 管理每次协作结束后 commit 一次养成版本习惯。进入大改动前口头知会在聊天工具里说一句“我开始动主场景了”比事后处理冲突轻松得多。这条清单不是 Superpowers 特有的但在这个实时同步强度很高的环境里这些小习惯能让你少掉很多头发。5. 实测踩坑记录安装、浏览器、协作里的三个坎5.1 新版本 Node 导致的依赖安装失败这应该是安装 Superpowers 时最常撞上的问题。项目源码里有若干依赖库年代较早当你用 Node 18 或更高版本执行 npm install 时某些依赖在编译阶段会报 OpenSSL 相关的错误最终的提示往往指向 node-pre-gyp 或者某个原生模块编译失败。解决方案分三种按推荐顺序排列。第一种切换到 Node 16 LTS再重新 npm install这是最省心的做法。第二种如果你必须在 Node 18 上运行试试npm install --legacy-peer-deps有时能绕过严格 peer 依赖带来的安装失败。第三种如果报错只集中在某一个原生依赖上可以单独搜索该依赖的预编译二进制版本手动替换。我在本地环境就是因为默认 Node 版本太新安装到一半就中断最后切换版本重装才顺利跑起来。这类“老项目配新运行时”的问题本质上不是代码坏了而是生态代差碰到时不用慌锁定一个项目文档中推荐的 Node 版本就好。5.2 浏览器与 WebGL 兼容性的现实Superpowers 的 3D 能力依赖浏览器里的 WebGL。我推荐优先使用 Chrome 或基于 Chromium 内核的浏览器稳定性和性能表现最好。如果只能使用其他浏览器建议提前确认 WebGL 是否开启同时留意老版本浏览器对某些特性的支持情况。另外还有一类状况容易误判在你本机跑着很流畅的项目别人通过网络访问 LIVE 链接时却卡顿或画面异常。问题通常不出在 Superpowers而是对方的浏览器版本、显卡驱动或网络延迟。这类问题排查时我会让对方先在同一局域网内打开编辑器页面跑一个简单场景做对照。如果局域网流畅、公网卡顿那基本可以确定是网络因素。5.3 协作过程中项目“卡死”怎么恢复我遇到过两次协作过程中编辑器界面失去响应的情况一次是有人同时拖动大量实体一次是脚本出现死循环导致浏览器线程被占满。前者通常等几秒能自行恢复后者就必须强制结束浏览器标签页再重新进入。重新进入后你会看到服务器端项目数据一般不会丢因为实体和脚本文件的保存不依赖前端进程存活真正需要警惕的是会话同步中的临时状态。恢复协作的规范操作是先杀掉崩溃的标签页再重新打开项目 URL如果仍然卡顿重启 Node 服务器并检查是否有脚本陷入了死循环。这里强烈建议在行为脚本里避免写无出口的 while 循环Superpowers 的脚本运行在浏览器主线程上死循环会把整个编辑器拖死。6. 插件扩展与适用场景什么项目适合它6.1 不满足默认功能时自己动手装插件Superpowers 的插件体系是它真正超能力的所在。安装第三方插件不需要去应用商店在项目设置里选择插件管理填入插件的 GitHub 仓库地址即可。社区中有不少现成插件比如多人语音、补充的模型导入格式、编辑器主题等装完重启项目就能生效。更重要的是插件并不神秘。一个插件本质上就是一份 JS HTML 构成的模块挂到宿主之后可以注册新的实体类型、资源类型、编辑器面板甚至服务器端的新接口。如果你懂一点前端开发完全可以按官方文档写一个只属于自己团队的小插件。这种可塑性给了我一种“工具是长在自己手里”的感觉而不仅仅是被厂商功能框死。6.2 我的判断用在哪里真香用在哪里别勉强说点个人结论吧。如果你符合下面任何一条Superpowers 都值得一装你需要一个低门槛环境来教新手理解 3D 编程协作功能可以让全班共用一个世界你要在 Game Jam 或创意活动中快速产出 Web 交互原型不想被引擎打包流程拖累你想维护一个长期开放的虚拟空间让社区成员随时能进来共同创作你本来就喜欢折腾开源软件愿意顺着源码学习一套完整实时同步架构。但如果你是奔着“做一款上线商业游戏”来的我不建议把 Superpowers 作为首选。它的性能和资源管理远不如主流游戏引擎移动端打包能力有限最终面向的仍是 Web 场景。把它定位成“创意原型工具、协作容器、教学实验舱”会比定位成“Unity 替代品”更舒适也更符合它本来的性情。从安装到跑出第一个旋转的方块再到和朋友通过 LIVE 链接远程协作Superpowers 给我的整体感受是它的名字有一点中二但理念真的够硬。最后补两个实战小技巧一是把 Data 目录纳入 Git 并固定每天备份节点因为项目所有内容都以文件形式存在那里做好版本控制比在编辑器里做任何额外设置都管用二是遇到任何“看起来不生效”的问题先别急着改代码去检查浏览器控制台的报错和 WebSocket 连接状态大多数异常在那里都有明确提示。希望这篇记录能让你少走一些我走过的弯路。
