🌸 我把一家日式街角便利店搬进了浏览器（102 个独立建模文件，在线直接玩）

在线预览：https://fanhuayishiy.github.io/ai-demo/sakura-station-corner/dist/

开源地址：https://github.com/fanhuayishiy/ai-demo （MIT，合集仓库，本项目在 sakura-station-corner/ 目录）

这个项目最初只有一段话：「用 Three.js 制作白天晴暖氛围的日式乡村车站街角便利店微缩三维景观。无 UI、无弹窗、无标注、无控件、无水印；质量优先，不计时间、token、渲染开销；禁止批量粗制合成，每个物件独立建模；每个资产必须是独立盄件，便利店内部物品同样逐件独立建模。」

「不计成本」这句是认真的。成品是一个白天晴暖的日式乡村车站街角：单线电车与站台、一家整面落地玻璃的 24 小时便利店、自动贩卖机、自行车置场、电线杆与档间电线、三株持续落樱的樱花树。

能玩什么

• 左键拖拽 360° 环绕；滚轮缩放对准光标位置；右键平移；全程带阻尼，松手有惯性。
• 底部一条天气条：晴 / 曇 / 雨 / 夕 / 夜，按 1–5 直切，W 顺序循环。每一档都是一份完整状态（五盏灯、天空色阶、雾、曝光、风、花瓣量、雨量），切换时约 1.3 秒收敛，中途连按不会打架。
• ?style=toon 一键从低多边形平涂切回三渲二 + 描边 + 景深/Bloom，两种风格共用同一套几何与材质定义。
• 除了那条天气条，画面里没有第二个控件，也没有文字标注、水印、浮层。
• 场景内不放置人物和动物，昼夜与天气由人切换，不会自己流动。

几个值得放大看的地方

• 便利店不是一张贴图：9 扇独立玻璃幕墙 + 16 个室内模块（货架 / 冷藏柜 / 便当柜 / 收银台 / おでん…）+ 20 个商品模块（饮料 / 零食 / 饭团 / 报纸…），从门口视角逐件可读。
• 电线只存在于两根电线杆之间：端杆被取景框裁掉时，那一档电线一并消失，不会出现悬空的线头。
• 飘落的是樱花花瓣的形状：基部收窄 → 中部最宽 → 先端樱花缺口 + 横向反卷，做进几何丌不是靠贴图 alpha。空中 1500 片、地面 5200 片，落地高度按广场 / 駐輪場 / 歩道 / ホーム 分别查表。
• 102 个资产模块文件，一物一文件，由 import.meta.glob 静态收集、按落位总表异步装配；单个文件坏掉只让它自己缺席。
• 掉漆、锈斑、褪色贴纸、胶痕、凹陷、青苔是逐件建模或逐件贴花，不是叠一层统一噪点。

技术栈

Three.js r186（WebGL2）+ Vite 7，原生 ES Module，无框架、运行时零第三方依赖。1129 张贴图全部由 Canvas2D 在运行时程序化生成，仓库里没有一张外部图片，也没有任何 CDN 或远程模型依赖。

本地跑起来

git clone https://github.com/fanhuayishiy/ai-demo.git
cd ai-demo/sakura-station-corner
npm install
npm run dev          # http://127.0.0.1:5173

关于「不计成本」之后

这条约束最后落在工程上是什么代价，README 里记了完整过程：唯一几何从 10432 压到 4225、启动到看见成品本地 6.15 秒、GitHub Pages 公网 7.2～7.5 秒，以及为什么这张画在内容量下达不到 60 fps。这里不展开。

关于这个合集

同一个仓库里还有一批 AI 辅助生成的交互式前端作品，全部 MIT 开源、全部带在线预览：可交互家庭 3D 空间、波音 787-9 结构数字孪生大屏、热泵洗烘一体机 3D 爆炸拆解、实时 3D 幼儿园、含氢综合能源数字孪生、三坊七巷真实地图导览、体素深夜拉面摊、夕空飞行……

每个项目的 README 都囹k���"y. :"���#9..��'��$9��9�.��"9c������"x�#{�#:$9ke��-�oex� y.#yf��.ya�{�#9����i��`9i#y�9�9��9��y�"��&�΋���]X����K٘[�X^Z\�K�ZKY[[�؛؋�XZ[���Z�\�K\�][ۋX�ܛ�\�ԑPQQK�Y��)�yo���"y�y�#��'{�#9c��.�y�y.*��\��&�΋���]X����K٘[�X^Z\�K�ZKY[[�