line-art-interactive-room

Community@xinsong854/line-art-interactive-room
Community skill — not reviewed. It was shared by 安诺涅 and has not been checked by Neta. Read SKILL.md below before letting an agent use it.
Use it in Cohub

Paste this into your agent's chat — it fetches the skill and follows it.

Use the skill: line-art-interactive-room. Run `npx -y @neta-art/neta-search-cli@latest skills use @xinsong854/line-art-interactive-room --via site` and follow what it prints. Read its complete output, redirecting it to a temporary file first if necessary, and resolve relative paths from the skill directory it prints.
Install from a terminal
npx -y @neta-art/neta-search-cli@latest skills use @xinsong854/line-art-interactive-room
Summary

Turn your world into a black-and-white line drawing room you can walk into and click around.

  • Builds a 3D room or space drawn entirely in sketch-style outlines on white, like a pen-and-ink illustration you can explore.
  • Furniture and objects respond to clicks: doors swing open, lights switch on, drawers slide out, a music box plays.
  • Flip between day and night with one switch, turning the whole scene from black lines on white to white lines on black.
  • All sounds are generated live, not played from files, so clicks, creaks, and ambient hums fit the sketchy mood.
  • Works best for a bedroom, study, shop, or small stage with a few clear pieces of furniture rather than a photo-real set.
SKILL.md
# line-art-interactive-room — 线稿互动房间

一张白纸、一支针管笔的 3D 房间:所有几何用线画,所有家具可点,所有声音实时合成。
本 skill 是一套完整、实测可跑的技法体系,提炼自「弥思的旧世会卧室」(已上线作品),
适配了 Animnia/pure-line-room(Apache-2.0)的渲染与音频架构。

## 什么时候用

- 用户要"线稿风/黑白素描感"的 3D 场景、房间、小屋、店铺、舞台
- 要一个"能走进去、东西能点"的互动空间(点数:门开合、灯亮灭、抽屉拉出、八音盒响)
- 要零资产交付:不 ship 图片/模型/音频,单 HTML + CDN 即可运行
- 不适用:要照片级光照、材质贴图、复杂阴影的项目;纯 2D 平面插画

## 一句话心法

> **线是结构,留白是体积,透明度是景深,交互是生命。**

线稿房间的全部观感来自四个决定,而不是建模精度:

1. **线的浓淡分层** — 结构线 opacity 1.0、砖缝 0.28、地板纹 0.22。线全一样黑 = 铁丝网;有浓淡 = 素描。
2. **白填充防抖** — 每个"面"都是白填充 + polygonOffset + 黑描边,线永远压在面上,不闪烁。
3. **昼夜即反转** — 夜晚不是调暗灯光,是整个调色板反转(黑线白底 ↔ 白线黑底),零成本。
4. **点得到才算活** — 细线点不中,用看不见的代理盒 raycast;悬停用 LineSegments2 克隆加粗提示。

## 制作流程

1. **定布局** — 先在纸上画平面图:房间 12×12、门在哪、窗在哪、大件家具(床/桌)定锚点。所有坐标手写进代码,不建模。
2. **搭外壳** — 复制 `references/starter-template.md`(单文件,含材质表+词汇+门+昼夜+音效占位),已可直接跑。
3. **画家具** — 按 `references/rendering.md` 的词汇表组合;刚体用 `box()`,柔软物用参数化等高线,圆润物用微椭圆 loop。每件家具一个 Group,位置用 `put()` 摆放。
4. **接交互** — 每件可点物一个 `mkItem()` 调用(见 `references/interactions.md`):开关型(门/窗/灯)、脉冲型(拍毯/捏枕)、持续型(表针/热气)三种节奏混用,别把房间做成配电箱。
5. **上昼夜** — `references/day-night-lighting.md`:调色板反转 + 窗外昼夜两幅画 + 灯光锥双通道渲染。
6. **配音效** — `references/audio.md`:原语层 4 个函数合成一切;环境循环随昼夜与窗开关联动。
7. **验收清单** — 过一遍再交付:

## 验收清单

- [ ] 白填充带 polygonOffset,任何角度无线面闪烁
- [ ] 线至少分三层浓淡(结构/纹理/地面)
- [ ] 每个可交互物:悬停加粗 + 光标变手 + 点击有音效
- [ ] 点击与拖动区分(位移 <10px 才算点击)
- [ ] 昼夜切换时 HUD/CSS 同步反色,无漏网的黑线/白线
- [ ] 夜+灯的锥形光正确(第二遍渲染不清屏、背景置 null)
- [ ] `setPixelRatio(min(dpr,2))`;重复纹理合并为单个 LineSegments
- [ ] 移动端:user-select:none、tap-highlight 透明、D-pad 可用
- [ ] 音量纪律:master ≤0.42,单音效 ≤0.06,环境 ≤0.012

## 参考

- `references/rendering.md` — 线稿渲染系统:材质表、绘制词汇表、墙上开洞、重复纹理、质感三定律、悬停加粗、版本与性能
- `references/interactions.md` — 交互系统:代理盒点选、mkItem 工厂、p/target 状态机、三种交互节奏、点击 vs 拖动、双相机模式与椭圆碰撞
- `references/day-night-lighting.md` — 昼夜与灯光:调色板反转、窗外景、灯光锥双通道裁剪渲染、开关联动
- `references/audio.md` — 程序化音频:引擎骨架、4 个原语、循环两条路线、八音盒预排、场景联动
- `references/starter-template.md` — 最小可跑单文件模板与扩展顺序

## 起源与许可

技法提炼自弥思的旧世会卧室(十三刻钟 IP);渲染与音频架构适配自 Animnia/pure-line-room,Apache-2.0。再发布衍生作品时请保留同类致谢。
Related skills
mv-still-craftCommunityTurn characters into frames that look like they were screenshotted from a music video.story-writing-craftCommunityWrite stories and scripts for your world, then polish them to feel human and compelling.paper-theatreCommunityTurn one flat illustration into a pop-up book stage where paper standees act out your script on their own.