你是不是也曾经被这些难题困扰过：想给产品做一个炫酷的 3D 官网，但 Three.js 门槛高、模型资源难找，或者用 AI 生成了视频却不知道如何在网页上完美嵌入透明背景？今天介绍的 Open 3D Skills（GitHub: Moh4696/open-3d-skills）就是为了解决这些问题而生的——它是专为 Claude Code、Codex、Cursor、Gemini CLI 等 AI 编程助手打造的 8 个实操技能合集，让你用自然语言就能构建出令人惊叹的交互式 3D 网站。
8 个技能，覆盖 3D 网站的完整生命周期
Open 3D Skills 不仅仅是一个工具包，它提供的是从策划到交付的一整套工作流。
🎨 核心创作技能
1. threejs-scene（3D 场景生成）
从零开始用纯代码构建实时 Three.js 场景：建筑、车辆、机器、地形等等。内置天空与日光预设、软阴影、环境光遮蔽、Bloom 光晕、实例化渲染等高级效果，无需加载任何外部模型文件。
2. scroll-film（滚动电影）
把 AI 生成的视频片段变成可滚动的沉浸式网页电影。支持首尾帧衔接、字幕停顿、手机端适配和尊重系统”减少动态”设置，让你的产品展示像苹果官网一样丝滑。
3. cursor-rig（光标跟随角色）
让一个手绘风格的卡通角色头部实时跟随鼠标移动，并带有自然的眨眼动画。无需复杂的骨骼绑定，Agent 就能自动完成角色网格构建和弹簧驱动播放器。
🔧 高级特效技能
4. exploded-view（爆炸视图）
交互式拆解机器原理——电机外壳升起、转子滑出、外壳变为 X 光模式，每个零件配有引线标注。非常适合做产品说明书式的技术展示。
5. alpha-cutout（透明视频）
从绿幕素材中提取透明背景视频，并兼容 Safari 等浏览器的 alpha 通道。内置底板测量工具和 WebGL 透明播放器。
6. motion-assets（AI 素材规划器）
在做 AI 图像/视频生成前，自动生成完整的资产清单、提示词和成本预算，避免盲目消耗 API 额度。内置循环检测器和图像外绘修复工具。
✅ 质量保障技能
7. site-check（站点检查器）
在真实浏览器（Chromium + WebKit）中以三种屏幕尺寸自动检查 3D 页面：帧率、绘制调用、错误、空白画布、溢出等问题全部检测并生成报告。
8. frame-capture（帧级录制）
以虚拟时钟精确录制任意网页为 60fps 视频，支持左右分屏或上下堆叠的”制作前后”对比图，方便向客户或团队展示成果。
为什么选这套技能而不是直接加载 3D 模型？
传统做法是从 Sketchfab 等网站下载 GLB 模型，但那样会面临：
– 版权不确定、 license 限制
– 文件体积大、加载慢
– 无法让 Agent 直接修改细节
Open 3D Skills 的核心优势在于所有场景均从代码生成——画面锐利、文件极小、完全可控，且任何参数都可以用自然语言让 AI 调整。
安装极其简单
只需一条命令即可完成安装：
npx skills add Moh4696/open-3d-skills
支持 Claude Code、Codex、Cursor、Gemini CLI、OpenCode 等多种 Agent。也可以单独安装某一个技能：
npx skills add Moh4696/open-3d-skills --skill threejs-scene
没有 Node 也没关系，项目提供了 Shell 安装脚本：
curl -fsSL https://raw.githubusercontent.com/Moh4696/open-3d-skills/main/install.sh | bash
与主流 AI 视频模型的无缝协作
Open 3D Skills 并不绑定特定 AI 视频服务，它适配了 Higgsfield、MiniMax、Kling、Seedance 和 Nano Banana 等主流模型。你只需要描述你想要的效果，技能会自动告诉你该用哪个模型、如何验证输出是否符合要求。
结语
Open 3D Skills 代表了 AI 辅助前端开发的一个重要方向：不再依赖模型资产和复杂配置，而是用代码和 Agent 的智能组合，让每个人都能轻松构建高质量的 3D 交互网站。无论你是做产品展示、技术讲解还是品牌官网，这套技能都值得收藏。
