CSS 3D Earth

Using CSS 3d to create an earth with shading and layers. It is not as good as using WebGL but it theoretically works on iPad.

I used PerspectiveTransform.js in this experiment. The class is originally created by Israel Pastrana, I customized it and added some error checking functions like concave polygon checking and close points checking.

Download:

Original PerspectiveTransform.js
My PerspectiveTransform.js

Control

Description here:

Credit

Myself: @EdanKwan

Inspired on : WebGL Earth by @alteredq

Original Class author: Israel Pastrana

Matrix lib author: Dr Peter Coxhead

Control Panel: dat-gui

Images: NASA Visible Earth

Web Font: Open San by Steve Matteson

Comment

safasdf

sdfdasdf

2014-04-03 05:58:52

Asif

Amazing...!!

2014-03-25 05:28:52

Aarti

amazing

2014-02-17 04:52:23

Zeh

congratz buddy! fantastic

2014-01-28 07:43:39

ganesan

nice. very much useful

2014-01-03 21:49:15

ganesan

hai

2013-12-18 09:31:25

koushik

This is amazing

2013-11-28 09:27:54

miller

i love much much

2013-11-26 10:42:11

5mentariosBeats

omg!! Congrats, unbelieve work man!

2013-10-08 19:34:23

Sansonaye

Great job! Can u share the code without the control panel? (with default values as static variables). With rotation and lights! Was great! :D

2013-10-03 15:42:08

shravani

xyz

2013-07-13 05:26:56

Surce Beats

What the fuck?! AMazing

2013-06-22 09:09:38

LOL

@Timo Because the iPad is a piece of shit

2013-06-04 08:29:16

Timo

This looks stunning! "theoretically works on iPad" - practically, it does not. Any clues why not?

2013-05-20 16:14:08

Olivier

This is a very nice tools , love it

2013-05-18 06:41:18

JFarrow

A true work of art! would love to recreate this with land surveyors all around the earth for Survey Earth in a Day 2.0!

2013-04-28 17:00:37

marwa

good

2013-04-18 09:31:51

sandip saundane

i want to more information abt ur work in 3D

2013-02-27 06:24:34

jkneb

lol it rocks!

2013-02-19 04:42:42

Minecraft

Wow, stuning !

2013-01-08 00:37:21

zak

i want this but clickable like http://jqvmap.com/

2012-10-31 22:04:49

zak

I wanto to use this but need th etfunctionality fromhttp://jqvmap.com/

2012-10-31 22:03:57

Darshan

Hey nice one.. you can use jquery also for smooth scrolling.. but really good work

2012-10-16 07:59:19

aditia

amazing

2012-08-28 21:45:48

miller

i loved

2012-07-25 15:55:08

Abdul Wakeel

Awsome work.

2012-07-16 12:46:00

Reza Fahlevi Z

I Like This , How To Make This In My blog

2012-07-01 06:58:27

miller

i love

2012-06-21 14:22:41

Dale

Not showing as a sphere on Chrome, but is rotating... good idea. =]

2012-06-01 07:05:50

Luis

Nice!

2012-05-14 10:05:22

Yop

7 fps with default settings on my galaxy nexus. but 60 pfs on my desktop This experiments reminds me this stage3D http://wonderfl.net/c/7r2j

2012-05-03 03:07:23

Danny

This is great! I wonder you need more columns than rows to get square-ish sides?

2012-05-02 11:45:30