在线预览 ：fanhuayishiy.github.io/ai-demo/cam...
开源地址 ：github.com/fanhuayishi... （MIT，合集仓库，本项目在 campus-3d-dashboard/ 目录）
这个项目最初的请求只有一句：「创建一个校园3D可视化场景的HTML文件，使用Three.js的ES Module导入方式。」 后面跟了 8 条编号要求：等距视角、中央标准运动场、8 栋建筑、树、路径、草皮贴片、三光源、软阴影。交付物到今天也还是一个 index.html，没有构建步骤，双击就能开。
能玩什么
- 左键拖拽环绕、滚轮缩放、右键平移，默认是策略游戏那种等距俯瞰；「自动巡航」让相机自己转，「重置视角」回到初始机位。
- 右上角两个按钮：切换夜景 （窗光转暖黄、路灯车灯全亮）和切换透视（40° 透视相机，保持机位与 target 不变，画面立刻有延伸感）。
- 底部一条「日照」滑块把太阳从早上六点推到晚上八点，低角度时天空和雾色往暖橘走、影子拉长；旁边还有「阴影」「草皮」两个开关。
- 鼠标停在任意建筑上，跟随光标弹出一块半透明提示牌，写这栋楼的名字。
- 12 辆车在四条市政道路上对向循环，速度各不相同；操场边的三层喷泉一直在喷水。
- 左侧三张图表面板（月度活跃度折线、各学院人数柱状、设施占比环形）叠在三维场景上，毛玻璃、可滚动。
几个值得放大看的地方
- 整个场景没有一张外部图片。跑道是 ShapeGeometry 挖出来的圆角矩形，足球场白线是 Canvas 现画的纹理，窗户是四面均匀排布的 PlaneGeometry，高度按楼层动态计算、上下各留 10% 边距。
- 玻璃用 MeshPhysicalMaterial 带 clearcoat 0.4，所以白天有反光；夜里 emissive 换成暖黄 #ffcc77，灯泡 emissiveIntensity 提到 2.2。
- 夜景不是简单调暗：背景与雾色固定成 #162030，ambient 0.24、sun 0.55、色调映射曝光 0.85，是一整套状态。
- 校园外围还有 3 环低多边形城市建筑，近、中、远三环高度递减，和校内白楼拉开层次。顶栏那个计数是实机统计的 64 栋建筑、238 棵树。
- 校园边界不是一圈纯色地面：围墙 + 大门 + 门卫亭，校内是一条圆角环马路，外面才是四条市政道路------深灰路面、白色虚线边线、黄色虚中心线，操场四角各立一组高杆投光灯。
- 喷泉 350 个粒子共用一个 geometry，加色混合配 Canvas 画的径向渐变柔光贴图：中心水柱快、外层散开、落水重置。全场景 SpotLight 数量被压在 40 个以内------车灯、路灯、操场投光灯全算进去。
技术栈
Three.js（ES Module + import map）+ Chart.js 4.4，两个都走 jsDelivr CDN，首次打开要联网。除此之外没有依赖、没有构建工具、没有后端。
本地跑起来
bash
git clone https://github.com/fanhuayishiy/ai-demo.git
cd ai-demo/campus-3d-dashboard
python -m http.server 8123 # http://127.0.0.1:8123/campus-3d-dashboard/
# 或者直接双击 index.html关于那些「数据」
顶栏的在校人数 12860、教职工 1240、建筑面积 28.6 万㎡，以及三张图表里的所有数字，都是写死的演示值，不接任何后端；建筑、树木、车辆是程序化低多边形模型，不代表真实校园测绘。它想证明的是另一件事：一个单文件页面能撑到什么程度。
关于这个合集
同一个仓库里还有一批 AI 辅助生成的交互式前端作品，全部 MIT 开源、全部带在线预览：可交互家庭 3D 空间、日式街角便利店微缩沙盘、波音 787-9 结构数字孪生大屏、热泵洗烘一体机 3D 爆炸拆解、实时 3D 幼儿园、含氢综合能源数字孪生、仓储运营中心、分布式智能消防沙盘、体素深夜拉面摊......
觉得有点意思，可以点个 Star：github.com/fanhuayishi...