mcpField
T
threejs-lite

threejs-lite

github.com/farworld-labs开发63 次安装
代码仓库

关于 threejs-lite

用于构建 Three.js 浏览器 3D 游戏的技能，强调简化渲染并保持移动端性能稳定，提供开发流程、约束和 Remix 集成参考。

主要功能

  1. 01单文件起步流程
  2. 02简洁场景与游戏循环
  3. 03降低绘制调用的指导
  4. 04移动端性能模式
  5. 05Remix SDK 钩子与校验

适用场景

  1. 01制作轻量级浏览器 3D 游戏原型
  2. 02构建渲染开销可预测的游戏
  3. 03准备上传至 Remix 的单文件 HTML
  4. 04检查必需的 Remix 游戏钩子

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/farworld-labs/remix-skills --skill threejs-lite

安装后在 Claude Code 中输入/threejs-lite确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

assets/
starter-single-file.html
references/
sdk-integration.md
threejs-mobile-patterns.md

详细介绍

Three.js Lite

当用户想要一款渲染复杂度低、移动设备性能稳定的 3D 浏览器游戏时，使用此技能。

工作流

  1. 从 assets/starter-single-file.html 开始。
  2. 实现一个摄像机、一个场景和一个游戏循环。
  3. 在添加视觉润色之前，先加入玩家输入和终止条件。
  4. 保持几何体和材质数量少且可预测。
  5. 如果目标平台是 Remix，请按照 references/sdk-integration.md 应用钩子。
  6. 交付前验证必需的钩子（gameOver、onPlayAgain、onToggleMute）。

防护措施

  • 保持绘制调用次数较低，默认避免使用后期处理。
  • 优先采用简单的 MeshBasicMaterial/MeshStandardMaterial 配置。
  • 首轮开发避免使用动态阴影。
  • 对于 Remix 上传内容，除非用户另有要求，否则输出带内联 JS/CSS 的单文件 HTML。
  • 对于 Remix 上传内容，在 HTML <head> 中加入 <script src="https://cdn.jsdelivr.net/npm/@remix-gg/sdk@latest/dist/index.min.js"></script>。
  • 将 3D 视为可选风格；游戏玩法清晰度优先于视觉复杂度。

参考资料

  • references/threejs-mobile-patterns.md：场景设置、控制和性能预算。
  • references/sdk-integration.md：Remix 验证所需的 SDK 钩子。

评论

支持 Markdown