Open 3D Skills

# Open 3D Skills

用八个技能教编程智能体搭建 3D 和动画网站，从 three.js 场景、滚动影片，到透明视频、跟随光标的角色和爆炸视图。适合网页开发者。

由 Moh4696 在 GitHub 上制作。这些说明是 Mindket 根据其 README 写的，项目自己的文件和许可证在它的仓库里。

## 简介

它是什么：Open 3D Skills 为编程智能体提供八个技能，用来制作 3D 和动画网站。它们涵盖用代码写成的实时 three.js 场景、随着滚动播放的影片、适用于 Safari 的透明视频、跟随光标的角色，以及机器的爆炸视图。它们还涵盖这些网站背后由 AI 生成的图像和视频，并教智能体在真实浏览器里测试页面，再以 60 fps 的流畅视频把它录下来。

适合谁：用编程智能体做开发，又想要 3D 或动画页面，却不想手写每一种技巧的网页开发者和创意工作室。

```table
行业 | 谁在用 | 怎么用 | 例子
网页代理商和工作室 | 前端开发者 | 用编程智能体搭建随滚动变化的 3D 页面 | 开发者让智能体做一个落地页，产品场景随着滚动而变化
硬件和产品公司 | 市场和网页团队 | 用代码生成的爆炸视图展示机器如何组合在一起 | 团队展示一台机器被拆开，每个零件都标在屏幕上
建筑和可视化 | 设计师 | 搭建在浏览器里实时渲染的建筑或户外场景 | 设计师要一个黄金时刻草坪上的凉亭，再要同一场景的夜晚版本
视频和内容制作 | 剪辑师 | 把完成的场景逐帧录制成流畅的视频 | 剪辑师把一个场景导出成 60 fps 视频，用于社交媒体帖子
```

如果你只需要平面的静态网站，可以跳过它。

用在哪里：
- Claude Code 和 Codex
- Cursor 和 Gemini CLI
- OpenCode，它也会读取 Claude Code 的文件夹
- Antigravity 和其他会读取技能文件夹的智能体
- 真实浏览器，智能体在里面检查自己做出的东西
- Safari，用于这些技能生成的透明视频

```table
用例 | 谁用 | 能得到什么
用代码做 3D 网站 | 前端开发者 | 一个在浏览器里运行的实时 three.js 场景
透明视频 | 网页设计师 | 背景透明、能在 Safari 里播放的片段
爆炸视图 | 产品团队 | 在屏幕上被拆开的机器，各零件带标注
屏幕录制 | 内容团队 | 逐帧录制的流畅 60 fps 视频
```

如何设置：你需要一个受支持的编程智能体，走 npx 这条路还需要 Node 22.20 或更新版本。没有 Node 的机器可以用 shell 安装脚本。

1. 在终端里运行下面的安装命令。
2. 回答几个问题：你要哪些技能，哪些智能体安装，以及安装只用于当前项目还是所有项目。
3. 安装完成后开启一个新的智能体会话。

```bash
npx skills add Moh4696/open-3d-skills
```

如果只想装一个技能，或者想不被询问就为所有智能体、所有项目装上全部技能，用下面这些命令。

```bash
npx skills add Moh4696/open-3d-skills --skill threejs-scene
npx skills add Moh4696/open-3d-skills -g -y
```

在 Claude Code 里，你也可以把它当作插件来安装。

```text
/plugin marketplace add Moh4696/open-3d-skills
/plugin install open-3d-skills@open-3d-skills
```

Codex 也有插件这条路。

```bash
codex plugin marketplace add Moh4696/open-3d-skills
codex plugin add open-3d-skills@open-3d-skills
```

如何使用：技能装好之后，描述你想要的 3D 或动画页面，你的智能体就会读取对应的技能。通过插件安装时，每个技能的名字带有前缀，例如 open-3d-skills:threejs-scene。之后用下面这条命令更新。

```bash
npx skills update
```

```table
工具 | 作用
threejs-scene | 用代码构建实时 3D 网站，带天空和太阳预设、柔和阴影、环境光遮蔽、泛光、镜头飞行和一个 60 fps 的起步场景
exploded-view | 在屏幕上把机器拆开，比如它演示的电动机
frame-capture | 逐帧录制场景，让视频播放得流畅
```

示例：你让智能体做一个 3D 场景：黄金时刻草坪上的一座凉亭，然后是同一个地方的夜晚。threejs-scene 技能用代码、天空和太阳预设以及柔和阴影把它搭出来，演示场景不使用模型文件。

新手与专家：这是给你的编程智能体用的说明包。装好之后，智能体就知道怎么搭建能在浏览器里运行的 3D 网站，怎么检查它们，以及怎么录制视频。第一件可以试的小事，是只装 threejs-scene，然后要一个简单的场景。

这里的每个技能就是一个装着 SKILL.md 文件的文件夹，任何支持 Agent Skills 的智能体都能加载。安装脚本把技能链接到每个智能体的技能文件夹，在 Windows 和同步文件夹里则用 --copy 选项复制。作者在真实网站上试过每一种技巧，并在真实素材上运行过每个脚本，然后才收录。代价是 npx 这条路需要较新的 Node。

```flow
为你的智能体安装技能
描述 3D 或动画页面
智能体用代码把它搭出来
在真实浏览器里检查结果
frame-capture 录制视频
```

注意事项：
- 许可证：MIT。
- 这套技能共有八个，你可以全装，也可以只装几个。
- 给没有 Node 的机器用的 shell 安装脚本，会在 ~/.open-3d-skills 里保留自己的副本并链接到它，所以再运行一次就能更新到最新。
- 安装脚本有卸载选项，会移除它安装的内容。
- 安装后要开启新的智能体会话，这样智能体才能看到这些技能。

## GitHub 上的数据（2026年11月6日）

- 星标：266
- 复刻：37
- 未关闭的议题和拉取请求：1
- 语言：JavaScript
- 许可证：MIT
- 话题：3d, agent-skills, animation, claude-code, codex, cursor, frontend, scroll-animation, threejs, webgl

## 链接

- 代码：https://github.com/Moh4696/open-3d-skills
- 发布版本：https://github.com/Moh4696/open-3d-skills/releases
- 议题：https://github.com/Moh4696/open-3d-skills/issues
- 星标历史：https://www.star-history.com/#Moh4696/open-3d-skills&Date

## 获取代码

```
git clone https://github.com/Moh4696/open-3d-skills.git
```

然后按它的 README 完成设置。这个工具包里没有会自己运行的东西。

README.md  6 KB