图片转3D场景 lijiejoy/dsh-skill-image2threejs

dsh-skill-image2threejs

一个 DeepSeek Harness (DSH) 技能,可将 2D 图片转换为可交互、可旋转的 Three.js 3D 场景 —— 在像素网格上对图片进行采样,并在每个采样像素处放置一个带颜色的 3D 网格,从而构建出浮雕 / 点阵 / 像素风 3D 场景。

一个 DSH 技能:把 2D 图片转换成可旋转的 Three.js 3D 场景。按像素网格采样图片,在每个采样像素处放置带颜色的 3D 网格,生成浮雕/点阵/像素风 3D 场景。

参考实现灵感来自 hannesro/image2threejs(webpack + RgbQuant 演示)。本技能将其泛化为一个单一自包含的 HTML 文件(通过 CDN 引入 Three.js,无需构建步骤)。

安装

需要 DSH(DeepSeek Harness)。该技能只是一个从本地技能根目录发现的 SKILL.md。

方案 A —— 直接克隆到用户技能根目录(推荐):

git clone https://github.com/lijiejoy/dsh-skill-image2threejs.git ~/.dsh/skills/image2threejs

重启你的 DSH 会话(或让文件监听器刷新目录)。技能 image2threejs 将出现在可用技能列表中。

方案 B —— 复制该包:

mkdir -p ~/.dsh/skills
cp -r image2threejs ~/.dsh/skills/ # where image2threejs/ contains SKILL.md

DSH 在 //SKILL.md 处向下发现一层技能。将整个仓库克隆到 ~/.dsh/skills/image2threejs 会使 SKILL.md 恰好位于该路径,因此会被发现;与其同级的 README.md/LICENSE 会被发现机制忽略。

项目本地安装(仅限本项目):改为克隆到 /.dsh/skills/image2threejs。

用法

在 DSH 会话中,只需提出请求,例如:

把这张图片 logo.png 转成 3D 场景 / convert logo.png to a 3D Three.js scene

DSH 会将请求匹配到 image2threejs 技能并加载其指令。随后,智能体会生成一个单一自包含的 HTML 文件(图片以内联 base64 data URI 形式嵌入,通过 CDN 引入 Three.js),你可以直接在浏览器中打开 —— 拖动以环绕观察,滚动以缩放。

该技能支持的选项

| 选项 | 默认值 | 说明 |
| image path/URL | (必填) | 本地路径或 URL;本地文件会以内联 base64 形式嵌入 |
| sampleStep | 6 | 每第 N 个像素采样一次;越小越密集 |
| shape | box | box / cylinder / sphere / torus |
| cell | 4 | 每个像素单元对应的世界单位 |
| depth | 4 | 当 heightMap 为 'none' 时的网格高度 |
| heightMap | brightness | 'brightness'(越亮越高)或 'none' |
| heightScale | 30 | 由亮度推导出的 z 值的乘数 |
| bg | #101216 | 场景清除色 |
| quantize | 0 | 0 = 关闭;N = 色调分离为 N 种颜色 |

工作原理

1. 将图片加载到离屏 上并读取像素数据。
2. 在网格上采样(每 sampleStep 像素);可选地对颜色进行色调分离。
3. 为每个采样像素放置一个 3D 网格 —— x/y 来自像素位置,z 来自亮度(高度图)或固定深度。
4. 用源像素颜色为每个网格着色;添加 OrbitControls + 灯光;自动适配相机。

文件
- SKILL.md — 技能定义（YAML frontmatter + 指令）。这是 DSH 唯一加载的文件。
- README.md — 本文件。
- LICENSE — MIT。

许可证

MIT © lijiejoy