本文已参与「新人创作礼」活动，一起开启掘金创作之路。

1.需求分析

移动版电子星图比较常用的有以下几款：

• 虚拟天文馆 Stellarium APP Stellarium 是一款虚拟星象仪的计算机软件。它可以根据观测者所处的时间和地点，计算天空中太阳、月球、行星和恒星的位置，并将其显示出来。它还可以绘制星座、虚拟天文现象（如流星雨、日食和月食等)。 Stellarium 可以用作学习夜空知识的教具，还可以作为天文爱好者星空观测的辅助工具，或者仅仅是满足一下好奇心。由于其高质量的画质，一些天象馆将 Stellarium 用在了实际的天象放映中。有些天文爱好者还使用 Stellarium 绘制他们文章中用到的星图。

Stellarium中文官网 Stellarium WEB版 Stellarium APP版下载

• 移动天文台 APP 移动天文台（Mobile Observatory Pro）是一款 Android 端的天文观测辅助软件，有了它，你就相当于将整个星空以及太阳系装入到你的 Android 手机中了。

移动天文台 APP下载

• 星图 Starchart APP 打开观测宇宙的窗户吧！将你的设备对着天空，Star Chart 会准确地将你所看到的内容告诉你。 Star Chart 利用设备的指南针、GPS、加速计和陀螺仪，实时计算每颗行星和可见星的当前位置，为你精确显示在夜空中的位置。

Starchart 星图绘制程序手册 星图 APP下载

2.功能设计

参考资料选用《天文观测完全手册》，《步天歌》；

---

• 西方星图和实用工具

在线天文平台 SKY-map中文版 ESASky中文版

• 古代中国星图

3.程序开发

移动版星图产品的实现方式选择微信小程序开发。

如何使用小程序的AR能力？ 如何在小程序开发AR？

#####程序技术路线一： 由Three.js 小程序 WebGL来展示银河系星图，星图使用gltf模型（点击看3D星图模型效果，可导出gltf格式）。

小程序canvas组件官方文档 Three.js 小程序 WebGL 的适配版本 关于在微信小程序使用WebglCanvas和ThreeJs开发的二三事（二） 关于在微信小程序使用WebglCanvas和ThreeJs开发的二三事（三）

最终卡在了模型加载处，原因可能是最新的开发者工具导致的？（20210201） example在最新的开发者工具中无法运行 工具类库下面的threejs-miniprogram 的example有报错？

#####程序技术路线二： 由小程序2d canvas来展示2D银河系星图，星图使用图片数据。 星图数据来源：中国天文数据底片数据库

#####程序技术路线三： 由Three.js 小程序 WebGL来绘制3D太阳系星图，星图使用代码渲染生成。

Three.js 中文教程 Three.js 参考手册 github:Galaxy based on threejs github:我是如何用three.js创造一个宇宙的？ github:星空连线demo github:根据THREE.js库学习WebGL的过程

土星环的实现参照了下文： three.js实现土星绕太阳自转体系 解决报错：Texture is not power of two. stackoverflow.com/questions/2…

在获取webgl离屏参数时，调用OffscreenCanvas.getContext()，生成的离屏实例获取不了参数，参照WebGL 1.0 定义的方法getActiveAttrib()。由于报错信息不明，目前卡在了这个位置上（20210205）

wx.createSelectorQuery()
      .select('#webgl')
      .node()
      .exec((res) => {
        const canvas = res[0].node
        this.canvas = canvas
        const THREE = createScopedThreejs(canvas)
        renderSolar(canvas, THREE)
        var offscreen  =  wx.createOffscreenCanvas()
        var webgl = offscreen.getContext('webgl')
        console.log(webgl)
        console.log(webgl.getContextAttributes())
        //console.log(webgl.getProgramInfoLog(renderSolar()))
        //console.log(webgl.getProgramParameter(renderSolar(),'ACTIVE_ATTRIBUTES'))
        //console.log(gl.getActiveAttrib(renderSolar(),100))
      })