☀️ 我把一座幼儿园搬进了浏览器（22 名儿童 3 名老师全程实时走动，在线直接玩）

在线预览：https://fanhuayishiy.github.io/ai-demo/sunny-side-kindergarten/dist/

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

当初的提示词写了一整段，态度在开头就摆明了：「整体采用高质量低多边形卡通微缩画风，造型圆润柔和、光照明亮自然、阴影柔和、材质干净清新，贴合儿童动画质感，无写实风格与廉价Demo质感」

成品是一座能实时转的迷你幼儿园：双层通透主楼、环形跑道、小型足球场、滑梯秋千跷跷板、沙坑、彩虹校门，22 名虚拟儿童和 3 名虚拟老师在里头一直动。它是 WebGL 实时渲染的场景，不是预渲染视频。

能玩什么

• 底部六个区一键聚焦：园区全景 / 活力操场 / 童趣乐园 / 创意教室 / 阅读森林 / 午睡时光，镜头平滑飞过去。
• 点「自动漫游」，按园区全景 → 活力操场 → 童趣乐园 → 创意教室 → 阅读森林五站循环巡航；自己拖一下就中断。
• 鼠标或触摸拖拽旋转、滚轮或双指缩放，右侧有放大、缩小、返回全景、全屏四个按钮。
• 点任意一个小朋友，镜头拉近并跟着他走；悬停时人物头顶出活动标签，只有活动类型，不带任何个人信息。
• 页脚可以切高清/流畅画质、暂停或继续动画；右上角能打开合成鸟鸣，默认关着。

几处容易忽略的地方

• 22 名儿童、3 名老师的动作是错开时间的：跑步、踢球、秋千、滑梯、跷跷板、沙坑、挥手、闲聊、跳跃、课堂、举手、阅读、绘画，不会整齐划一。
• 人物动作由可复用的骨骼节点驱动，没用任何外部动画资产；移动走预设安全路径。作者把话说得很清楚：这不是导航网格、多智能体避障或完整随机行为 AI。
• 性能是算过账的：703 个静态网格合并成 25 个实例批次，远处隐藏人物身上 262 个细节网格，全场只留一盏阴影灯、2048 阴影贴图，流畅模式直接关阴影，标签页一隐藏就暂停渲染。右下角那个 FPS 是帧时间采样出来的。
• 主楼是双层通透玻璃加开放立面，从外面能直接看到室内的桌椅和课堂活动。「午睡时光」那一区摆的是布置好的空床位，没人躺着。
• 镜头被限制在园区正面的一段弧线里，不会穿进主楼背墙。
• 人物行为是 MVP 演示，不宣称物理仿真或完全无碰撞。

技术栈

Three.js 0.180 / WebGL 实时渲染 + 原生 ES Module JavaScript + Vite 6。建筑、人物、设施全部程序化生成，3D 场景没有外部模型或图片依赖，标识文字用 Canvas 画纹理，鸟鸣用 Web Audio 合成。

本地跑起来

git clone https://github.com/fanhuayishiy/ai-demo.git
cd ai-demo/sunny-side-kindergarten
npm install
npm run dev          # http://localhost:5173

关于「规避穿模、人物漂浮、镜头穿墙」

提示词里这句最难自证。README 记了 11 项自动测试，覆盖人数、镜头目的地、连续路径、设施同步、座椅接地、LOD 和绘画动作，桌面与手机视口的验证记录另放在 docs/verification.md。一整段原话逐字留在项目 README 的「主生成提示（原文）」里：

https://github.com/fanhuayishiy/ai-demo/blob/main/sunny-side-kindergarten/README.md

关于这个合集

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

觉得有点意思，可以点个 Star：https://github.com/fanhuayishiy/ai-demo