threejs 绘制球体_实战：用 threejs 创建一个地球

原标题：实战：用 threejs 创建一个地球

提示：

讲座

前端大型免费公开课讲座

教程

从零基础学前端教程，都在这~

上个月底，在朋友圈看到一个号称“这可能是地球上最美的h5”的分享，点进入后发现这个h5还很别致，思考了一会，决定要不高仿一个?

到今天为止，高仿基本完成，

线上地址

github地址

除了手机端的media控制没有去兼容，其他的基本都给仿了。 那为了让你觉得是高仿，最好使用chrome的手机调试模式进行访问。微信打开将听不见声音看不到视频... (后面再有时间看是不是仿的再进一步)

之所以要仿它，因为觉得这个h5还挺酷，想看看自己需要花多长时间找到并实现它的技术路径。

需求分析

这个h5的主要玩法很简单：地球自转的时候会播放背景音乐(比如海浪声)，为了找到这个声音是从哪个地球上哪个地方传来的，需要长按下方的按钮，这时地球会自动转动到目标地点，然后镜头拉近，穿过云层，最后你会看到和这段声音相关的视频内容；松开手之后，上面的过程会倒退回去，地球又开始自转，播放着下段神秘的背景音乐。

个人觉得这个设计还是很新颖的，不是说用了3D的效果，而是将一个看起来很复杂的动画(从宇宙拉近到地表的过程)，使用最基础的3D效果和其他一些常规的动画手法去实现，并且能流畅的运行在手机浏览器上。另外还有声音和视频的完美搭配，用户体验不错。