把三幅用 Three.js 程序化构建的互动场景收进同一个入口：暮色中的临水楼阁「听澜阁」、清晨江雾里的竹筏钓叟「烟江钓叟」，以及深色影棚中的概念轿跑「光影展厅」。
外层负责品牌、三境导航、路由与加载；两套体验各自运行在独立的同源页面里，切换时保留原有的视角、配置与交互状态。
|
|
|
| 听澜阁 · 暮色临水 | 烟江钓叟 · 清晨江雾 | 光影展厅 · 概念轿跑 |
|
|
| 移动端 · 听澜阁 | 移动端 · 光影展厅 |
桌面截图使用 1440×900 视口生成，页面支持自由旋转、缩放与移动端自适应。
环境要求：Node.js 20.19+（推荐 22 / 24）。
npm install
npm run dev启动后打开终端里打印的地址（默认 **http://localhost:5173**）。Windows 也可以直接双击 start.bat，脚本会自动安装依赖、启动开发服务器并打开浏览器。
三个场景可以直接用链接进入：
- 听澜阁：
http://localhost:5173/#tinglan - 烟江钓叟：
http://localhost:5173/#angler - 光影展厅：
http://localhost:5173/#showroom
两个体验页也可以独立打开：/experiences/jiangnan.html 与 /experiences/showroom.html。
- 顶部胶囊导航在「听澜阁 / 烟江钓叟 / 光影展厅」之间切换，当前项高亮。
- 导航按钮聚焦时可用
←/→移动；切换会同步地址栏 hash，浏览器前进 / 后退可返回对应场景。 - 体验页首次被访问时才加载；未激活的页面暂停渲染但保留状态，切回时无需重新加载。
- 听澜阁与烟江钓叟共用同一个江南体验，底部双景标签与外层导航双向同步。
- 切换时两层做约 0.5 秒的淡入淡出；首次加载由「三境」加载层等待场景就绪，4 秒后显示等待提示，初始化失败时可重新加载。
江南双景
- 拖动 / 单指：环绕旋转
- 滚轮 / 双指：缩放视角
- 自动环游：右上角按钮或
空格；手动操作后短暂暂停再继续 - 重置视角：右上角按钮、双击画面或
R
光影展厅
- 拖动 / 单指：环绕看车；滚轮 / 双指：缩放
- 底部配置栏：外观 / 内饰 / 空间三种模式，切换车漆、轮毂、卡钳、内饰与屏幕主题
- 右侧视角条：每个模式提供预设机位；点击热点查看部件说明
- 空间模式：可开关尺寸标注、乘员与行李示意
- 自动环绕、重置视角、全屏；
1/2/3切换模式，空格自动环绕，R重置 - 「预约试驾」为纯前端演示表单，不会发送任何数据
三开间、两层木构的临水楼阁：青灰色双层曲面瓦顶、微翘屋角、朱褐立柱、细木格窗、斗拱与二层栏杆；楼下石台、踏步、拱桥、石灯、山石、竹丛与荷叶，沉在傍晚暖光和水面倒影里。
- 自定义曲面屋顶：瓦垄、瓦当、正脊、垂脊、博风板与悬鱼
- 柱、梁、枋、雀替、斗拱、格扇窗、寻杖栏杆与挂落
- 实时反射水面、动态水纹、薄雾、浮尘与暮色天空
- 暖色夕阳、冷色天光、檐下灯笼与窗纸透光
- 匾额「听澜阁」与室内屏风、茶案陈设
清晨薄雾中的江心竹筏：戴斗笠、披蓑衣的老叟盘坐垂钓，竹筏上有鱼篓、茶壶茶盏、酒葫芦与撑篙，筏尾一盏红纸灯笼；左岸芦苇垂柳、白鹭与远飞的鸟，远处淡墨山峦和一座小塔的剪影。
- 九根竹竿扎成的竹筏、麻绳捆扎、竹席与筏上器物
- 斗笠、层叠蓑衣、白须与靛青布衣逐层搭建
- 弯曲竹钓竿、鱼线、红白浮漂与扩散的涟漪
- 实时水面反射、贴水晨雾、低角度暖光与灯笼冷暖对比
- 白鹭、飞鸟、垂柳、芦苇、远山与塔影
深色影棚中的通用概念轿跑：低趴溜背比例、封闭式前脸、贯穿灯带、隐藏式门把手与全景玻璃车顶；地面为实时反射，配合柔和轮廓光与橙色点缀。
- 外观 / 内饰 / 空间三种看车模式，各自独立的预设机位与右侧视角条
- 8 种车漆、3 种轮毂、3 种卡钳、4 种内饰与 2 种屏幕主题
- 内饰包含左舵驾驶舱、仪表、中控屏、方向盘与座椅；空间模式提供尺寸、乘员与行李示意
- 外观热点与部件说明、全屏、自动环绕、配置抽屉与预约试驾演示
- 车型、参数与配色均为虚构概念数据，页面标注「非官方概念演示」
所有几何体与纹理均在运行时程序化生成，不依赖外部模型、图片、字体或 HDR 文件。
npm run build
npm run preview预览地址：**http://localhost:4173**。构建产物位于 dist/，包含三个 HTML 入口：
dist/index.html
dist/experiences/jiangnan.html
dist/experiences/showroom.html
three-realms/
├─ index.html # 三境外壳：品牌、导航、加载层与两个 iframe
├─ experiences/
│ ├─ jiangnan.html # 江南双景独立体验页
│ └─ showroom.html # 光影展厅独立体验页
├─ src/
│ ├─ shell/
│ │ ├─ main.js # hash 路由、导航同步、懒加载与暂停/恢复
│ │ └─ shell.css # 三境外壳界面与响应式布局
│ └─ experiences/
│ ├─ jiangnan/
│ │ ├─ main.js # 渲染器、相机、交互、场景切换与 embed 桥接
│ │ ├─ style.css
│ │ └─ scenes/ # registry、shared、tinglan、angler
│ └─ showroom/
│ ├─ main.js # 展台装配、状态、交互与 embed 桥接
│ ├─ style.css
│ ├─ car/ # 车身、细节、轮毂、内饰与材质
│ ├─ data/ # 配色、轮毂、内饰、视角与文案配置
│ ├─ lib/ # 几何、数学与程序化纹理工具
│ ├─ showroom/ # 影棚、相机轨道与空间示意层
│ └─ ui/ # 配置栏、热点、标注与弹窗
├─ docs/screenshots/ # README 展示截图
├─ PROMPT-angler.md # 烟江钓叟的可复用场景提示词
├─ PROMPT-showroom.md # 光影展厅的可复用看车提示词
├─ vite.config.js # 多页面构建入口
├─ LICENSE
├─ start.bat
└─ package.json
- 外壳与两个体验通过同源 iframe 隔离：两套 DOM、CSS 与渲染循环互不干扰，切换时只显隐容器。
- 体验页加载
?embed=1后会给body加is-embed，隐藏与外壳重复的左上角品牌与加载页，并把右上角控制下移，避免与三境导航重叠；不带参数直接打开时保持完整独立页面。 - 体验页通过
postMessage与外壳通信：- 体验 → 外壳：
world:ready（场景可交互）、world:scene（江南当前场景） - 外壳 → 体验：
world:pause/world:resume，以及江南的world:scene
- 体验 → 外壳：
- 未激活的体验只暂停更新与渲染，rAF 与状态保留；切回时恢复，并校正相机时间，避免跳帧。
- 路由使用 hash：
#tinglan/#angler/#showroom，默认#tinglan；江南内部标签切换会同步到外层 hash 与导航高亮。 - Vite 使用
build.rolldownOptions.input配置三个入口；外壳与两个体验各自按需加载。 - 江南使用 ACES 色调映射、PCF 软阴影、实时反射水面与自适应像素比；光影展厅使用 PMREM 环境光、反射地面与受限像素比。
- 截图模式：江南地址追加
?still=1关闭自动环游；光影展厅追加?instant=1使用固定相机状态。 - 对
prefers-reduced-motion做了适配：系统要求减少动态效果时默认不自动环游，按钮仍可手动开启。
「听澜阁」的场景概念、需求描述与交互设定参考自一份外部的项目提示词，概念并非完全原创；Three.js 场景实现、程序化建模、材质、灯光与界面代码由本项目独立完成。由于提示词来源未附带原作者与项目链接，暂以“外部提示词参考”标注；如原作者或原项目希望补充署名、调整表述，欢迎联系。
「烟江钓叟」沿用了同一套江南微缩景的创作方向，其场景描述整理为可复用提示词，见 PROMPT-angler.md。
「光影展厅」为通用概念轿跑展示，不使用任何品牌的官方素材、名称或参数，页面标注「非官方概念演示」；可复用提示词见 PROMPT-showroom.md。
代码以 MIT License 发布，详见 LICENSE。场景概念与提示词的参考说明见上方“来源说明”。