立项背景和目标 :随着天问一号、毅力号等火星探测任务的推进,公众对火星的兴趣日益浓厚。本项目面向普通用户,将真实的火星气象数据、地质地标、星际航行知识以可视化方式呈现,降低大众了解火星的门槛。
软件功能、核心功能模块的介绍 :
1. 火星气象查询 :覆盖 42 个中国城市对应的火星地表气象,展示地表温度、风速风向、气压、尘埃光学厚度等核心指标及 24 小时趋势曲线;通过云函数对接法国 LMD 火星气候数据库获取实时数据,失败时自动回退本地 24 小时数据集。
2. 3D 火星地表可视化 :基于 Three.js 构建可旋转、可缩放的 3D 火星模型,支持经纬度定位、城市对应地表展示、大气辉光与尘埃天气联动渲染,单指拖拽旋转、双指缩放。
3. 火星景点导览 :收录奥林帕斯山、水手谷、杰泽罗陨石坑等 10 个真实地标,含 NASA 公共领域实景照片与详细地质/探测资料,点击地标可 3D 定位并查看大图画廊。
4. 出行清单 :按生命维持、能源通讯、个人防护、工具补给四大类提供 20 项火星旅行必带物品,支持本地勾选与进度统计。
5. 星际航行信息 :基于圆轨道近似计算地火实时距离、光程、霍曼转移窗口期与下次冲日倒计时。
业务流程、功能路径描述 :用户进入主页 → 选择或 GPS 定位城市 → 查看实时火星气象与 24 小时趋势 → 点击进入 3D 火星地表页 → 切换地标查看实景与资料 → 通过出行清单准备物资 → 参考星际航行信息规划行程。
整体架构和设计思路 :采用微信小程序原生框架,主包放置首页、城市选择、出行清单三大高频页面;Mars 相关的 3D 地表页、气象详情页、地标数据与高清贴图放入独立分包(mars),确保主包体积控制在 2MB 以内。3D 渲染层封装为可复用组件`mars-globe` ,通过 properties 控制经纬度、自转、缩放、地标列表、尘埃浓度等参数,支持主页(小尺寸)与地表页(全屏)两种场景复用。数据层采用"云函数优先+本地回退"双模式:云函数`quickstartFunctions` 调用 LMD 接口,失败时降级到本地 24 小时数据集,保证弱网下可用。
"我"的负责模块和结果 :独立完成全部前端页面、3D 组件、数据适配层与云函数开发。3D 火星模型实现高精度球面 + Phong 凹凸贴图 + Fresnel 大气散射 shader,真机稳定运行。打包优化后主包约 1.49MB、Mars 分包约 1.9MB,全部满足微信小程序体积约束。
遇到的难点与解决方案 :
1. WebGL 原生组件层级问题 :canvas 为原生组件,z-index 无效导致遮挡文字。解决方案:放弃层叠,改用 flex 物理隔离(文字与火星分列布局,互不重叠)。
2. 分包 ES6 语法崩溃 :分包中数组解构被注入 babel helper,运行时报 "module not defined"。解决方案:分包内全部改用 ES5 写法(下标取值、for 循环、Object.assign)。
3. 旧版 Three.js API 兼容 :threejs-miniprogram 内置 r108,`setAttribute` 不可用。解决方案:自动兼容`setAttribute || addAttribute` ,几何体改用`SphereBufferGeometry` 。
4. 点击事件双触发 :canvas touchend 同时触发自定义事件与原生合成 tap,导致页面跳转两次。解决方案:组件根节点用`catchtap` 拦截冒泡,导航函数加 600ms 防重入节流。
5. 云函数外网受限 :LMD 服务器在法国,云函数偶发连接超时。解决方案:实现自动回退本地数据机制,前端无感降级。