如何用Threejs实现类似滴滴官网的地球动画效果？

本文共计2233个文字，预计阅读时间需要9分钟。

偶然浏览官网页面，首页下第六栏（概况）有个精致的地球三维动画，试用there.js实现，基本实现了动画效果，不过还存在一些问题；这个动画看似简单，但用到了不错的绘制方法。

偶然翻滴滴官网看到首页下翻第六栏（大概）有个绚丽的地球的三维动画，试着用there.js实现了下，基本实现了动画效果，不过还是有些问题；这个动画看似简单，但也用到好的绘制方法和计算，这里先写一下主要功能的实现；

先看示例：39.106.166.212:8080/webgl/t4（由于是写dome的一个项目，内容较多没做优化，第一次加载会会比较慢，需多等待几秒）

（lice这个截图工具也是很不好用，每次都截到一半 ╮(╯﹏╰)╭）

一、 3d绘制场景的构建

绘制一个3d程序首先需要添加 渲染器，场景，照相机 这些元素，这里补充一个灯光；

1、渲染器

首先创建一个渲染器，参数为页面中的canvas元素，

渲染器的作用就是把3d场景的内容结合照相机渲染到页面中，

最后将画布背景设为白色。