前言
马上中秋节了，千言万语不及一句我想你了，提前祝你中秋节快乐，透过这轮明月，我可以看到你，我想，你也可以看到我。
为什么前端好玩，因为前端可以看到效果，我想很多人作为程序员的乐趣不仅仅是为了写增删改查，可以做更多的事，恰逢过节，你可以用你自己的方式来表达祝福。
思路
虽然最近工作没有做3D相关的东西，不过之前自学过一些多多少少还是有点印象，在正式开始做之前，先把思路理清楚。1.首先我得用开源免费的blender来做一个圆圆的月亮，2.然后通过vue脚手架工具搭建起来项目，3.通过threeJS把建好的glb模型加载进来，4.结合一些动画库来实现一些运动的效果，因为我们这里并不涉及到真实项目上线，所以3D模型的压缩以及解压的过程我这里就省略，如果想做到极致的同学也可以优化一下，在blender导出的时候选择压缩模型，在threeJS导入模型将压缩过的模型先解压，它提供了解压方法。
建模
1.新建一个UV球体
2.让球体表面光滑，并且找一张好看的moon
3.删除球本身的材质，添加月球的材质（可以找个tif拖拽进去，如果需要月亮表面的纹理的小伙伴可以问我要）到球体
4.然后我们添加个渐变色，用吸管取一下图片中月亮的颜色
5.稍微调整一下，导出glb模型文件，还挺好看的叭，因为时间有限，如果有精力的小伙伴可以继续润色
threeJS渲染
1.项目是用vite加vue3搭建的，以下为依赖，使用setup语法糖来快速搭建
2.创建Moon组件，作为容器用来装载canvas
3.通过GLTFLoader将我们做好的模型加载进来，记得将glb模型放置对应的路径，调整一下生成实例的代码即可，（因为发现blender里添加的渐变颜色没有生效，所以这里遍历设置了一下材质的颜色）：
3.threeJS封装的细节代码就不贴了，如果不熟悉封装步骤的同学可以参考一下官方文档，我们看下效果吧，是不是头次一近距离观察月亮！：
4.最后我们再通过gsap库来让月球自己转起来！
5.看下效果：
尾声
功能并不复杂，主要是实现的思路提供给各位，希望你也可以从建模到threejs加载的过程亲自尝试一次，如果你有兴趣的话还可以加上好听的音乐和祝福的文字。圆圆的大月亮送给你，顺祝中秋节快乐!