场景方向
当被要求构建“一个沉浸式 3D 网站”时，模型往往会产出它所见过所有 3D 演示的平均值：一个在紫色夜晚中呼吸的球体、一个带弧线的虚线地球、一个灰色地板上的灰色产品，或者每个部分都采用相同的整洁分割布局。而获奖的网站会做不同的事情：一个源于主题的创意、一个围绕物体自身构建的世界、一个随着故事节奏切换镜头的摄像机、具有光源和分级调色的光照、带有风格的排版、一个可供交互的物体，以及一个真实网站应有的外壳。 并且它们在手机上也能流畅运行。
本技能为你提供：一个经过筛选的方向、一套资产库、一个包含完整后期处理管线的启动模板，以及一个能像访客和评审那样渲染页面的检查工具。它掌控 3D 方向。如果已安装页面设计技能（taste-skill, impeccable, hallmark）、three.js API 技能（cloudai-x/threejs-skills）或正式的 GSAP 技能，请将它们用于相应部分。
<skill> 代表本技能文件夹。请从项目根目录运行脚本。
流程
- 盘存。 列出所有真实存在的元素：主题名称、其产品或服务、地点、数据、代表性物品，以及任何提供的模型或图片。提供的模型将是主角（参见 references/object.md）。
- 抽取方向。 独自操作时，你可能会选择默认类别，所以让脚本来抽取：
node <skill>/scripts/draw.mjs --kind <person|maker|product|place|brand|event|...> --brief "<一行描述>" node <skill>/scripts/draw.mjs --direction <选择的id> --brief "<一行描述>" --scenes <n>.scene-direction/sheet.md文件中写入：情绪、世界、光照、调色、需寻找的资产、地面、字体，以及每个场景的镜头和文案放置。采纳它。仅当你能够说清理由时才重抽，并在报告中说明。 - 创意与交互元素（参见 references/idea-and-devices.md）。在这个网站上，[属于该主题的某个事物] 变成了 [该方向的载体或交互机制]。 它必须能通过竞品测试。添加一个交互元素。阅读 references/tells.md。
- 获取资产（参见 references/assets.md）。运行方案中的
assets.mjs命令：获取 HDRI，以及方案指定保真度下属于该物体世界的道具和表面贴图。在挑选前先查看缩略图接触页，然后将它们get到assets/目录。 - 基于
<skill>/assets/starter.html构建。 它提供的是基础设施而非布局：一个全出血画布，背景色来自 CSS 地面；后期处理链（HDRI、环境光遮蔽、泛光、暗角、色调映射、SMAA）；用于摄像机的SHOTS；每个场景的文案放置及遮罩层；一个时钟（gsap.ticker + Lenis）；文字行渐显；一个简短开场动画；页眉、索引和页脚；指针漂移；减少动效和画质等级。根据方案填写其FINISH以及每个 section 的data-ground、data-shot、data-copy和data-chapter。替换占位文本、标题和描述。如果使用 Vite 或 Next.js，请移植其组件。 - 构建世界与物体（参见 references/object.md, colour-world.md, finish.md）。按照 object.md 的标准，将主题的独特物体建模，然后将其置于某个场景中：你获取的道具和表面贴图、一个房间、一个山谷、或一个收藏集。使用方案中的灯光装置和场景内的光源进行照明。
- 讲故事、镜头与动效（参见 references/scenes-and-motion.md, motion-and-type.md）。每个场景对应一个节拍、方案中的镜头，以及一个用展示字体呈现的标题。对于地点类场景，摄像机应沿着一条路径在世界中穿行，而非围绕一个微缩模型。规划摄像机的运动轨迹、手机版和减少动效版本。用主题的语言装饰网站外壳（参见 references/chrome.md）。
- 检查。
node <skill>/scripts/check.mjs <文件夹或URL> --out scene-check # 添加 --click "Enter" 用于开场大门npm i -D playwright && npx playwright install chromium，如果项目不应添加该依赖，可在临时文件夹中运行）。它会分别拍摄桌面端和手机端每个场景处于静止状态时的截图（scene-check/film-desktop.png,film-phone.png），并在减少动效模式下重新加载页面，报告帧时间、页面重量和开场动画时长。查看它生成的所有图片。 - 审视与修复：重点关注前三项，最多三个轮次（参见 references/critique.md）。根据图片对照评分标准打分，修复最弱的三个方面，然后再次检查和审视。优先选择能保持设计的最小改动。如果某个结论是有意为之（如分层文字、刻意裁剪、从首屏下方升起的物体），则保留它并加以说明。
- 报告。 提供方向、创意陈述、交互元素、所使用的资产、检查结果、自评分数，以及你特意保留的内容。
追求野心，而非拘谨
在盲测中，每当需要在丰富而有氛围但存在微小瑕疵的页面与整洁安全却毫无特色的页面之间做出选择时，评审总是会偏好前者。消除缺陷只占一半的工作。另一半在于实质内容：
- 全出血。 3D 内容占据整个屏幕。文案通过遮罩层放置于其上，或当渲染视图偏离物体时放置于物体旁。
- 每个场景不同的镜头。 不要只更换文案而使用相同的摄像机。检查工具会标记出整个滚动过程中仅使用一到两个镜头的页面。
- 大型英雄区。 在首屏上，物体或世界占据大部分画面，旁边以超大字体显示名称。
- 一个世界，而非虚空中的物体。 房间、桌子、大地、收藏集、属于该主题的道具，且具有真实比例。
- 氛围与调色。 具有时间和方向的光照、场景内发光的源、接触阴影、经过调色的画面。丰富而不模糊：每一帧都有真实的暗部和饱和的色彩；雾效仅用于营造世界的距离感，绝不可覆盖主体。
- 带有风格的排版。 使用方案中的展示字体并以展示级字号呈现，展示来自盘存中的真实文字和数字，一行一行地出现。
- 一个网站，而非演示。 页眉、索引、包含真实联系方式的页脚、时长约 2 秒的开场动画。
底线：永远不要交付这些
- 检查中的 ERROR：崩溃、空白画布、加载失败（包括减少动效模式）。
- 主体被意外裁剪或在手机首屏上显得过小。
- 在场景静止点上无法阅读的标题，或长段滚动中没有文字。
- 布局超出手机屏幕宽度。
- 隐藏了原生鼠标指针、缺少标题、描述或
h1，或使用了占位符文案。 - 开场动画让访客等待超过几秒钟，或在检查工具的 GPU 上帧率低于 40 fps。
- 使用了过时或不匹配的 three.js 版本。请使用项目指定的版本，或下方列出的版本。
按标签修复
[errors]：先修复第一个错误。常见原因包括：构造函数参数交换、let/const在声明前使用、附加组件 URL 指向了其他版本、缺少 import-map 条目、404 错误，以及纹理被 CORS 阻止。[framing]：根据当前宽高比调整每个镜头的取景（参见 references/framing.md）。[ambition]：为每个场景赋予方案中独立的镜头（参见 references/scenes-and-motion.md）。[story]：没有文字的帧。确保每个场景的文字在其对应场景可见时始终显示，仅在场景切换时淡出（启动模板的循环中已实现此逻辑）。[labels]：重叠或裁剪的文本和标签；手机上的工具栏遮挡（参见 references/labels.md）。[legibility]：在移动任何元素之前，先调暗文字后方的场景或增强遮罩层（参见 references/legibility.md）。泛光过亮的光滑表面是因为灯光太强：请降低灯光强度，而非调整泛光阈值。[usability]：评审的基本要求：原生光标、标题、描述、语言设置、一个h1、alt 文本、减少动效（参见 references/chrome.md）。[performance]：像素比、阴影贴图大小、环境光遮蔽质量、减少道具数量、缩小纹理尺寸（参见 references/finish.md §7）。
固定版本
于 2026-11-03 在 npm 和 jsDelivr 上验证（启动模板的 import map）：
{ "three": "https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js",
"three/addons/": "https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/",
"three/examples/jsm/": "https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/",
"postprocessing": "https://cdn.jsdelivr.net/npm/[email protected]/build/index.js",
"n8ao": "https://cdn.jsdelivr.net/npm/[email protected]/dist/N8AO.js",
"gsap": "https://cdn.jsdelivr.net/npm/[email protected]/index.js",
"gsap/": "https://cdn.jsdelivr.net/npm/[email protected]/",
"lenis": "https://cdn.jsdelivr.net/npm/[email protected]/dist/lenis.mjs" }
n8ao 导入了 three/examples/jsm/…，所以请保留该入口。postprocessing 6.39 支持 three.js 最高到 r187 版本。r187 注意：PCFSoftShadowMap 已移除（请使用 PCFShadowMap 配合 shadow.radius）；HDRLoader 替代了 RGBELoader；outputEncoding/sRGBEncoding 已移除。GSAP 3.13+ 包含了 SplitText（gsap/SplitText.js）。
参考文件
| 文件 | 何时阅读 |
|---|---|
| references/idea-and-devices.md | 步骤 3：创意陈述、交互机制、交互元素 |
| references/tells.md | 步骤 3，以及在报告前再次阅读 |
| references/assets.md | 步骤 4：保真度、寻找和放置道具、表面贴图、预算 |
| references/object.md | 步骤 6：提供的模型（包括配色变体）、代码构建物体的标准、细节、材质 |
| references/colour-world.md | 步骤 6：调色板到背景、灯光和材质；色调映射；雾效；颗粒 |
| references/finish.md | 步骤 6：灯光装置、HDRI、接触阴影与环境光遮蔽、后期处理链、性能 |
| references/scenes-and-motion.md | 步骤 7：节拍、镜头词汇、摄像机运动、路径、手机版 |
| references/motion-and-type.md | 步骤 7：统一时钟、缓动函数与持续时间、渐显、开场动画、字体层级、减少动效 |
| references/chrome.md | 步骤 7：页眉、索引、页脚、鼠标指针、标记、声音 |
| references/critique.md | 步骤 9：评分标准与审视-修复循环 |
| references/framing.md, labels.md, legibility.md | 修复带有相应标签的问题 |
| references/example-furkanboran.md | 查看示例标杆：一个真实的网站拆解分析 |
| library/directions.json | 脚本抽取的十二个方向 |
致谢
抽取方向、创意陈述、竞品测试、“一个交互元素”、审视-修复循环以及“仅凭克制会让作品显得单薄”的警告，改编自 taste-skill（MIT 许可证）。签名和方向轮换来自 hallmark（MIT 许可证），体验模式来自 impeccable（Apache-2.0 许可证），原型词汇来自 awwwards-3d（MIT 许可证）。模型、纹理和 HDRI 来自 Poly Haven（CC0 许可证）。工作示例及其改编模式来自 Furkan Boran 的 furkanboran.info。详见 README.md。