[月亮气球用多少球合适]基于threejs中秋佳节之际带你遨游星空？

海上生明月，郝宇星。又是两年中秋节时，忆起上一场时令已是那远方的儿时光阴，忙使他们忘记了假日理应的排解。那时在这假日将要已经开始的这时候，让他们用标识符来乳豆节。

那时的主轴是如前所述threejsLongpr火星环绕着火星体育运动的效用，并减少脱胎换骨天空的觉得，如宣传照图右图。

具体来说绘出出火星和火星，如前所述SphereBufferGeometry类绘出二维圆盘，模块如下表所示：

模块

叙述

radius

该特性表述圆盘的直径，缺省是50

widthSegments

该特性选定锐角路径上的单向数，段数越多，圆盘的表层越扁平，缺省是8，最大值是3

heightSegments

该特性选定水准路径上的单向数，段数越多，圆盘的表层越扁平，缺省是6，最大值是2

phiStart

该特性用以选定从x轴的甚么边线已经开始绘出，值域覆盖范围是0到2*π，缺省0

phiLength

该特性用以选定从phiStart已经开始画啥，默认2*π（画整球）

thetaStart

该特性用以选定从y轴的甚么边线已经开始绘出，值域覆盖范围是0到2*π，缺省0

thetaLength

该特性用以选定从thetaStart已经开始画啥，默认2*π（画整球）

具体来说在网上找一张火星平面图，此处只需要用到前面三个模块即可，效用图如下表所示：

火星图类似，只是会相对火星绘出的圆盘会小一些。

然后是给两个圆盘减少动画的效用，火星本身的自转效用，火星围绕火星环绕着体育运动的效用。

火星自转效用比较简单，只需要不断修改火星实例的y轴的值即可。

火星比较复杂，除开自转的同时还需减少一个环线体育运动效用，这里减少一个t值，默认为0，在动画体育运动函数中不断减少t值，并结合数学三角函数实现环绕着效用。

最终动画的效用如下表所示右图：

只有两个圆盘体育运动相对单调，所以再减少天空体育运动的轨迹提示氛围感。由于星星是不断体育运动飞出屏幕之外的，所以他们要有重新绘出的机制。

绘出星星

减少动画及重置

正常的天空背景都会有一些星云，在此基础上再减少一张背景图的体育运动使之更加真实。天空背景本质也是一个圆盘，只是直径相对较大，肉眼看不出来。

然后在整体的动画函数中修改不同路径的数值，使之觉得游荡在太空中的觉得。

整体实现功能就结束了，里面用到大量的threejs的相关API，有兴趣的同学可以去研究研究，最后的完整标识符如下表所示：

https://code.juejin.cn/pen/7141241609026273321

https://codepen.io/isladjan/pen/zYqLxeG

看完如果觉得有趣，记得点赞收藏起来。说不定哪天就用上啦～

最后祝大家中秋节快乐，假日玩得开心～

专注前端开发，分享前端相关技术干货，公众号：南城大前端（ID: nanchengfe）