我的博客网站最近多了个页面：/campus。打开是江南大学蠡湖校区的 3D 沙盘，能旋转、缩放、搜索校内 99 个地点，有日夜和实时天气，图书馆的弧形翼楼、北大门的牌坊、体育馆的浅拱屋顶都在。效果如下图所示：
点击建筑之后可以查看对应建筑的信息：（当然也可以直接通过搜索框输入地点来查找对应的建筑）
通过点击右上角的下载原图，可以下载到我参考的校园地图。
搭建这个校园沙盘的想法
最近 openai 推出了最新模型 gpt6-astra，而且网上用它来使用 Blender 的呼声很高，效果很不错。刚巧，最近赶上开学季了，新生来到学校我想到的是他们可能对校园不熟，而且我之前小红书上面有放过如下的校园地图，但是我感觉上面的数字其实不是很明显，找起来其实挺麻烦的，所以我萌生了一个想法：用 gpt6-astra 搭建一个 3D 版本的江南大学沙盘，提供搜索功能，让新生可以快速定位对应的建筑。
动手前我到处找校园的地理数据，最后发现最靠谱的资料是学校后勤保障处发布的2024 版校园地图——一张插画风格的鸟瞰图（也就是我之前在小红书上面发布的图片），上面标了 99 个编号地点，外加 14 个候车亭对应的 16 个图面点位。
这张图决定了整个项目最关键的一个早期决定：**坐标用图面归一化坐标，不用经纬度。**我把原图的标注位置换算成 1626×1080 的归一化网格，每个地点一个稳定 ID（place-001 到 place-099）。从此搜索、分类、分享链接全部挂在 ID 上，后面不管建筑外观怎么改、位置怎么挪，ID 永远不变。事后看这是最值的一个决定——后来我推翻重做了两次建筑外观，点位数据一行没动。
当然也要注意一点：图面坐标是示意，不是测绘，包括我们的沙盘也是。沙盘里两栋楼隔多远，和现实中差多远，没有任何保证。后续可能通过不断的优化会提高精度，但目前只是参考。
技术栈
- 建模：Blender 5.2 + Python 脚本（由 gpt6-astra 驱动生成）
- 网页：Next.js 15 + React 19 + three.js
- 模型格式：GLB + Draco 压缩
- 天气：Open-Meteo 免费接口
整体流程
流程其实就四步：先用最简单的几何把页面跑通，再逐栋建模，然后把模型换进去，最后加上天气和日夜。
第一步：火柴盒版
我没有一上来就纠结建筑好不好看，第一版全部是 three.js 里的盒子：一个地点一个方块，加上窗户贴条。这一版确实丑，但搜索、旋转、缩放、点击定位这些交互全都先跑通了。交互没问题时，后面换模型就是纯粹的"换皮"，不用担心把页面改坏。
第二步：Blender 建模
99 栋楼手工建模不现实，我的做法是让 gpt6-astra 写 Python 脚本在 Blender 里生成建筑——描述"这栋楼是几层、入口在哪、屋顶什么形状"，脚本负责搭出来。先拿图书馆练手（弧形翼楼、双组竖窗、截顶坡屋顶，复杂度够高，能验证这套方法行不行），跑通之后分批铺开，最终 99 处全覆盖。
每栋楼的外观都是对着学校官网和招生网的公开照片做的，能认出是哪栋楼就达标的，效果如下图所示：
第三步：模型进网页
Blender 里导出的模型转成 GLB 格式，做 Draco 压缩——99 个模型压缩后总共 7.4MB，网页按需加载，不会一次全下下来。这一步做完，沙盘就从"能转的方块阵"变成真正的校园了。
第四步：天气和日夜
最后接了 Open-Meteo 的天气接口，沙盘会显示蠡湖校区当前的实时天气：下雨就是雨天，天黑了楼里的窗户会亮起来，光照跟着当天实际的日出日落时间走。这部分没什么技术含量，但对氛围感的提升是最明显的。
结尾
整个项目从想法到 99 栋楼全部就位，每天空闲时候搞一会儿，前后大约一周。沙盘地址在我的博客网站的 /campus，我的博客网站目前还不支持 ssl 证书，所以只能 http 访问，地址是 http://49.235.136.223，欢迎江南大学的同学们来找找自己宿舍楼。
如果你也想给自己的学校做一个，欢迎交流。