错觉艺术(1):JavaScript 版的 3D 地球

2012-04-26 by Dron

最近被炒得比较火的「绿色承诺,拯救地球」活动中,有一个 Flash 版的 3D 地球,我一看来了兴趣,一直想用纯 JavaScript 也实现一版,直到昨晚才腾出点时间,开始折腾这事。

这里是 Demo

实现原理也简单,直接把 .mask<div> 设置为 display:none 就能看明白:上下两个层重叠,上层放一个 png 背景图,该 png 图片中间有个篓空的圆形,目的是透过该圆形看到后一层的图片,这样,基本的球状就完成了;下层放的是一张滚动的地图,该地图被拆碎分放到 99 个 div 容器中,这些容器大小不一,成条状横向并排,使之拼合起一张完整的地图,这些 div 的宽度是根据正弦曲线计算得出,越靠中间的 div 越宽,使地图能呈现出曲面效果,滚动地图的实现是通过对这些 div 改变背景图片的位置来完成,此外,我对这些 div 做了不同程度的纵向拉伸,边缘低,中间高,也是根据的正弦曲线算法,使地图滚动时点的物理走向更能加接近球面的特点,当然,这是错觉艺术,更像是卷纸,不是真正意义上的球面。

由于中间的容器排列方法为横向,并且拉伸了高度,这样做,决定了地球只能做正东或正西方向的滚动,其它方向的滚动需要改变容器的排列和拉伸方法,小有复杂,我做了一些实验,效果不是很理想。