Three.js3DCampusPoC
三维校园信息平台
Three.js 校园地图概念验证
Overview
把校园论坛、三维校园地图和经过授权的校园信息整合成网页端校园信息平台,让用户可以点击建筑查看地点、公告、活动和相关社区内容。当前处于概念验证阶段。
Problem
校园信息散落在不同系统中,缺少统一的、可视化的一站式访问入口。需要建立三维与二维数据之间的映射关系,同时确保数据来源的授权和合规。
Solution
设计四层架构:三维层(Three.js 加载 .glb/.gltf 校园模型)、数据层(建筑/地点/公告/活动/论坛内容)、身份层(复用校园论坛系统账号)、内容层(建筑详情、导航、活动、关联帖子)。
- Three.js 加载校园三维模型,点击建筑显示信息
- 数据模型围绕建筑、地点、房间、公告、活动和论坛内容设计
- 复用校园论坛系统账号与权限,不另建身份系统
- 已根据沙盘照片制作 4096x3072 校园平面概念图,分块拼接验证通过
Tech
Three.js 三维渲染,.glb/.gltf 模型格式。如涉及大范围地理数据可扩展至 Cesium。前端使用原生 Three.js 加载和交互。
Result
概念验证阶段。已有校园平面概念图和三维素材,设计了完整的产品结构。数据来源边界已明确:只使用学校授权接口、公开数据和管理员导入数据。
Reflection
项目具有较强作品集价值,能同时证明三维前端、产品整合、数据建模和校园场景理解。但现阶段应先当概念验证,不应把照片推断的平面图包装成官方准确地图。下一步需要获取或确认官方建筑名称与相对位置。