上个月尾，在朋友圈看到一个号称“这多是地球上最美的h5”的分享，点进入后发明这个h5还很新鲜，思索了一会，决议要不高仿一个?
到今天为止，高仿基本完成，
除了手机端的media掌握没有去兼容，其他的基本都给仿了。 那为了让你以为是高仿，最好运用chrome的手机调试形式举行接见。微信翻开将听不见声响看不到视频… （背面再有时刻看是不是仿的再进一步）
之所以要仿它，由于以为这个h5还挺酷，想看看本身须要花多长时刻找到并完成它的手艺途径。
需求剖析
这个h5的重要弄法很简朴：地球自转的时刻会播放背景音乐（比方海浪声），为了找到这个声响是从哪一个地球上哪一个处所传来的，须要长按下方的按钮，这时候地球会自动转动到目标所在，然后镜头拉近，穿过云层，末了你会看到和这段声响相干的视频内容；松开手以后，上面的历程会倒退归去，地球又最先自转，播放着下段神奇的背景音乐。
个人以为这个设想照样很新鲜的，不是说用了3D的效果，而是将一个看起来很庞杂的动画（从宇宙拉近到地表的历程），运用最基本的3D效果和其他一些通例的动画手段去完成，而且能流畅的运转在手机浏览器上。别的另有声响和视频的圆满搭配，用户体验不错。
反复视察，理清页面功用：
加载：加载进度百分比，饶椭圆轨道运转的小行星作为loading动画（这个动画我没有做）
地球：3D球体，扭转入场动画，自转，漂移的云层，都市的坐标点，镜头的扭转与拉近，穿越云层动画
星空背景：静态星空背景图，动态（闪灼的）星星，划过的流星
隐蔽的音频和视频：按内容（地理位置）分别的音频和视频内容
其他：操纵指引示意动画，地球上方会显现当前都市的经纬度，“相识更多”的结语页面等
寻觅手艺途径
翻开chrome inspect一下。
首先是这个地球，得看看它是真3D照样假3D（由于许多3D效果是拿雪碧图做的，比方这里的扭转的3D飞机），效果找到了：
<div class="ns-webgl-page">
<canvas width="750" height="1200" style="width: 375px; height: 600px;"></canvas>
</div>而且在网站source文件中搜到了THREE，那就是threejs没跑了。
然后是谁人穿越云层的效果，猜想多是GIF，多是SpriteSheet Animation，也有多是一段视频。然则考虑到这个穿越的动画可以正反两边播放，那末就许多是是SpriteSheet Animation了，不然GIF或许视频文件须要两个动画方向各预备一份。这个从chrome debug东西的network下找到了证据—— 页面下载了一系列名为kf_cloud_0000X.jpg的图片文件。随手就把它们down下来，备用。
再就是背景音乐和隐蔽视频的题目，同样在network下，找到了两个文件，一个mp3一个mp4，每一个文件都包含了一切片断，就像是media的雪碧图，只在须要的时刻掌握播放对应片断罢了。
其他的内容都没什么题目，CSS动画或许CANVAS都好做。那末到此，手艺途径都清晰了，预备最先写代码。
难点打破
关于我而言，用threejs绘制地球可以会是难点，threejs没有用过，而且印象中对3D的东西，一向比较畏敬。假如3D的地球弄不出来，这个项目其他的都做完了，在众多的宇宙中是怎样也找不到“声响来自何方”了。
OK，来看threejs怎样能弄出个地球来。（这个阶段并没有最先项目代码，而是只管的在一个临时文件中举行涂鸦，疾速随便的到达绘制出地球的目标就好了）
官网
关于新的手艺，首先得看官网。这里并非来周全进修threejs的，而是抱着很强的目标性去完成特定功用，因而直接去示例中找，是不是有相似完成可以自创。在官网首页中，经由过程缩略图，找到了下面三个关于地球的例子。
惋惜，貌似这里的例子都是一些产品应用，代码都是紧缩过的。因而最先去寻觅官方示例，末了在examples里找到了canvas_geometry_earth，最棒的是在github上有源码。
示例代码
clone下threejs的项目代码，找到上面的示例文件。示例代码不到200行，浏览以后发明实在threejs和之前打仗过的一些2D的游戏引擎（createjs，pixijs）等比较相似，都须要有场景（scene），要有衬着轮回（render loop），在scene上增添对象（Mesh）或许是group；而Mesh由外形（Geometry）和材质（Material）构成，Material则又是由图片建立的纹理（Texture）而来。差别的是，这里有相机（Camera），有光芒（Light），另有一些一向都不明白的间隔单元题目。
轻微修正一下示例代码，就可以建立出来了earth。然则从运用的资本来看，只要一个地表纹理贴图（earth4.jpg），而xplan中另有3个关于earth的图片文件：
不确定bump和spec是什么，我的思绪是先在官方文档中找这些症结词，假如找不到，就加上threejs一同去做google。官网上找到了bump相干的东西，但协助最大的是google出来的一篇细致的怎样运用threejs建立earth的教程。（假如这个教程早点冒出来，也省了前面改示例代码的时刻了。重要也源于对threejs不熟悉，没有想到哪些示例可以已有许多教程了）
换上了earth4.jpg贴图以后：
教程中的步骤不再这里反复，下面仅仅对一些症结东西作简朴的诠释。
earth_bump
相识到bumpmap：
Bump mapping is a technique to simulate bumps and wrinkles on the surface of an object. The result is an apparently bumpy surface rather than a smooth surface although the surface of the underlying object is not actually changed. I’m sorry, you can’t tilt the camera to see 3D mountains with this technique. You can adjust the bump effect (how much the map affects lighting) with the bumpScaleparameter
threejs中bumpmap是调治对光芒的感知，来使人能显著感觉到不光滑的外表，而并没有在mesh中增添升沉，即没有真的转变外形。
官方bumpmap示例效果图以下：
实在这里的earth_bump.jpg就是一个DEM，在threejs中称作bumpmap，在其他一些处所也有被叫做heightmap。即用灰度图表达高程，越黑示意高程越低，越亮示意高程越高。GIS专业中经常使用，unity3D中建立地形也会用到这个。
增添了earth_bump以后：
earth_spec
相识到了earth_spec.jpg是specular map，用来调治镜面反射的，这里重如果调治海洋对光芒的反射，增添真实性。
增添了earth_spec以后：
漂移的云层
云层的增添， 前面的教程里已很细致了，实在就是一个齐心，半径大一点的球体罢了。
增添了云层以后：
浮动的标签
xplan中地球外表有都市标签，会跟着地球的自转而挪动，同时又坚持了程度的方向。google症结词：threejs floating label。因而找到：
找到方向就好办，轻微参考一下官方API文档和找到的示例代码，可以很轻易的在earth上增添上浮动标签。
小结
到这里，3D地球的绘制基本差不多了。虽然threejs是新东西，然则绝大部份功用都轻易找到方向，而且修正一下示例代码都够疾速的完成我们想要的效果，所这个历程并不难。重点是怎样在一个未知的领域内找到想要的东西，而且疾速的为本身所用。
但历程当中我遇到一个机能题目，耽误了良久。xplan的页面在chrome的PC和手机形式都有近60的FPS，然则我建立的earth在PC有60，然则在手机形式却不到30！末了一一调试代码，修正参数，花了良久才找到缘由：
renderer.setPixelRatio(window.devicePixelRatio)threejs的示例代码中都有这么一行，就是这一行致使了我的代码比xplan的代码在手机上绘制的像素点翻倍，从而致使了机能成倍的下落。
别的，前面也提到，我关于3D框架中的间隔单元和坐标题目，很隐约。因而这里，关于earth的大小，camera朝向，每一个都市标签的三维坐标和其他关与三维坐标的题目，我都硬抄了xplan的参数（幸亏他们的代码没有紧缩…）。另有一个要认可的，就是地球背面的淡蓝色光晕效果，貌似用了一些高等的衬着手艺，我也就硬搬了xplan这部份代码。
下一篇将引见怎样制造多步骤、可进可退的动画，在我看来这个才是手艺难点。
