Skip to content

ncuhome/NCUmap

Repository files navigation

NCU 校园地图

https://ncumap.ncuos.com/

TODOs

  • 加载动画
  • 字体优化
  • 开发文档
  • 细化模型
  • 区域/建筑标签
  • 重绘路面
  • 鸟瞰相机固定轨迹
  • 修复 Roughness
  • 根据定位,在地图上显示当前位置
  • build by 家园工作室
  • 夜景车流
  • 时间系统
  • 天气系统
  • 第三人称行走
  • 第三人称飞行(参考 AER Memories of Old)
  • 寻宝(神秘商店兑换码...)
  • AR/VR

开发

基本调试

git clone git@github.com:ncuhome/NCUmap.git
cd NCUmap
yarn
yarn dev

项目结构

models # 模型文件夹
├── map.blend # blender 源文件
├── map.blend1 # blender 自动备份副本文件(已忽略)
└── map.glb # 3d模型文件
scripts # 脚本文件夹
├── export_map.py # blender 导出模型前需执行的脚本文件
├── generate_model.py # .glb 文件生成 .tsx 文件后执行额外修改
...
src # 源码文件夹
├── App.tsx
├── ...
...

模型

Blender 源文件为 models/map.blend

导出后的 GLTF 文件为 models/map.glb

模型导出过程

在 Blender 中修改map.blend后,导出前执行 scripts/export_map.py 脚本,此脚本会执行如下操作:

  1. 将 duplicate linked 物体转换为 duplicate object 物体 (make_single_user)
  2. 将每个 Object 的 Origin 位置设置为该模型的最高点。此设置是为了在网页中显示文字时让文字浮与建筑上方
  3. 将整体大小缩小为约 30 米。太大规模在导入后不能正常显示
  4. 将整体移动到场景原点 (0,0,0)

执行后,不要保存 Blender 文件,直接导出为 GLTF 文件。 导出时按默认选项导出即可(已经调整为合适的设置并记录导出设置)。

根据模型生成代码

目前 node v18.10.0 版本会报 TypeError: Failed to parse URL ... 建议先降级:

yarn global add n
n 16

将导出的 GLTF 文件保存到 models/map.glb 后,执行 yarn map2tsx 生成模型代码。 此脚本会执行如下操作:

  1. 根据模型生成引用模型所需的代码
  2. 执行 scripts/generate_model.py 进行所需更改
  3. 格式化生成的代码

scripts/generate_model.py 对生成代码的更改

  1. 为有中文名的建筑加上相应的悬浮标签
  2. 添加所需的 import
  3. 修复地面的大面积阴影问题(删除 castShadow 属性)
  4. 添加 BVH 优化性能
  5. FocusPlane 手动添加透明材质(由于聚焦全部太远,添加了一个更小的 FocusPlane 作为默认的聚焦对象)

所有更改目前均由正则和替换实现。