在之前的文章中，我们学习了three.js的基础知识、粒子动画 ，以及 几何体、贴图、用户交互与调试。今天我们将用three.js写一个反光球效果。

从今天开始学习着色器，这篇文章将使用简单的着色器动画实现一个3D地球。着色器语言类似于c语言，当我们写webgl程序时，着色器语言以字符串的形式嵌入在javascript语言中。

获取某个地区的模型数据（包含地形、路网、建筑）、卫星图。生成总模型。 获取到这个地区的边界图（我这里是用SVG）。 通过SVG生成一个边界模型。 两个模型作布尔操作，切出想要的轮廓。 导出模型。 这样就有一个地区的模型了，在生成模型的时候，可以对模型内的路网、建筑等做拆分、取名…

想象一下，在一个虚拟的3D世界中都需要什么？首先，要有一个立体的空间，其次是有光源，最重要的是要有一双眼睛。下面就让我们使用threejs+vue3创造一个炫酷的登录页吧！

可能细心的小伙伴注意到了我们初始化的 viewer 实例并没有写在 data 里，这是因为Vue中会为 data 中的属性做数据劫持，如果属性是一个对象，将会递归进行数据劫持，viewer 这个实例中的属性数量非常多，如果将它放置 data 中。。。只有一个下场，浏览器崩溃 指…