Three.js: create Earth

Summary

• 1. Presentation
• 2. Installation
  • 2.1. Step #1: clone the project
  • 2.2. Step #2: launch the project
• 3. Resources & Inspiration
  • 3.1. Examples
  • 3.2. Earth
  • 3.3. Skybox / Starmap
  • 3.4. Light
  • 3.5. Shadow
  • 3.6. Controls
  • 3.7. Animation
  • 3.8. Textures examples
  • 3.9. Textures used in this project
    • 3.9.1. Earth
    • 3.9.2. Lens flare
    • 3.9.3. Moon
    • 3.9.4. Skymap
• 4. License

1. Presentation

Classic example, but very fun for testing and discovering Three.js : with controls panel, change more than 70 parameters, and play with Sun, Earth and Moon, lens flares, textures, bump mapping, animations, lights, shadows, …​

Work in progress on https://jprivet-dev.github.io/three.js-create-earth/

Also a Pen by jprivet-dev on CodePen (License).

⬆ Back to top

2. Installation

2.1. Step #1: clone the project

$ git clone git@github.com:jprivet-dev/three.js-create-earth.git

2.2. Step #2: launch the project

Open the index.html file in your favorite browser.

⬆ Back to top

3. Resources & Inspiration

3.1. Examples

• https://stemkoski.github.io/Three.js/

• https://threejs.org/examples/

⬆ Back to top

3.2. Earth

• http://learningthreejs.com/blog/2013/09/16/how-to-make-the-earth-in-webgl/

• http://blog.mastermaps.com/2013/09/creating-webgl-earth-with-threejs.html

• http://thematicmapping.org/playground/webgl/earth/

⬆ Back to top

3.3. Skybox / Starmap

• https://threejs.org/examples/webgl_materials_cars.html

• https://threejs.org/examples/#css3d_panorama

⬆ Back to top

3.4. Light

• https://threejs.org/examples/webgl_lensflares.html

• https://threejs.org/docs/api/lights/SpotLight.html

⬆ Back to top

3.5. Shadow

• https://threejs.org/examples/webgl_shadowmap.html

• http://jsfiddle.net/4Txgp/13/

⬆ Back to top

3.6. Controls

• https://github.com/mrdoob/three.js/blob/master/examples/js/controls/OrbitControls.js

• https://threejs.org/examples/misc_controls_orbit.html

• http://workshop.chromeexperiments.com/examples/gui

⬆ Back to top

3.7. Animation

• mrdoob/three.js#1830

• https://threejs.org/examples/webgl_animation_skinning_blending.html

⬆ Back to top

3.8. Textures examples

• https://threejs.org/examples/webgl_materials_bumpmap.html

• https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL

• https://nasa3d.arc.nasa.gov/

• http://planetpixelemporium.com/earth.html

• http://earthobservatory.nasa.gov/blogs/elegantfigures/2011/10/06/crafting-the-blue-marble/

• http://visibleearth.nasa.gov/view.php?id=79765

• http://visibleearth.nasa.gov/view.php?id=57747

⬆ Back to top

3.9. Textures used in this project

3.9.1. Earth

• https://s3-us-west-2.amazonaws.com/s.cdpn.io/122460/earth_bump_1024x512.jpg

• https://s3-us-west-2.amazonaws.com/s.cdpn.io/122460/earth_bump_2048x1024.jpg

• https://s3-us-west-2.amazonaws.com/s.cdpn.io/122460/earth_clouds_1024x512.jpg

• https://s3-us-west-2.amazonaws.com/s.cdpn.io/122460/earth_clouds_2048x1024.jpg

• https://s3-us-west-2.amazonaws.com/s.cdpn.io/122460/earth_map_1024x512.jpg

• https://s3-us-west-2.amazonaws.com/s.cdpn.io/122460/earth_map_2048x1024.jpg

• https://s3-us-west-2.amazonaws.com/s.cdpn.io/122460/earth_specular_1024x512.jpg

• https://s3-us-west-2.amazonaws.com/s.cdpn.io/122460/earth_specular_2048x1024.jpg

⬆ Back to top

3.9.2. Lens flare

• https://s3-us-west-2.amazonaws.com/s.cdpn.io/122460/lens_flare_circle_32x32.jpg

• https://s3-us-west-2.amazonaws.com/s.cdpn.io/122460/lens_flare_circle_64x64.jpg

• https://s3-us-west-2.amazonaws.com/s.cdpn.io/122460/lens_flare_hexagon_256x256.jpg

• https://s3-us-west-2.amazonaws.com/s.cdpn.io/122460/lens_flare_hexagon_256x256.jpg

• https://s3-us-west-2.amazonaws.com/s.cdpn.io/122460/lens_flare_sun_1024x1024.jpg

• https://s3-us-west-2.amazonaws.com/s.cdpn.io/122460/lens_flare_sun_512x512.jpg

⬆ Back to top

3.9.3. Moon

• https://s3-us-west-2.amazonaws.com/s.cdpn.io/122460/moon_bump_1024x512.jpg

• https://s3-us-west-2.amazonaws.com/s.cdpn.io/122460/moon_bump_512x256.jpg

• https://s3-us-west-2.amazonaws.com/s.cdpn.io/122460/moon_map_1024x512.jpg

• https://s3-us-west-2.amazonaws.com/s.cdpn.io/122460/moon_map_512x256.jpg

⬆ Back to top

3.9.4. Skymap

• https://s3-us-west-2.amazonaws.com/s.cdpn.io/122460/skymap_negx_1024x1024.jpg

• https://s3-us-west-2.amazonaws.com/s.cdpn.io/122460/skymap_negx_512x512.jpg

• https://s3-us-west-2.amazonaws.com/s.cdpn.io/122460/skymap_negy_1024x1024.jpg

• https://s3-us-west-2.amazonaws.com/s.cdpn.io/122460/skymap_negy_512x512.jpg

• https://s3-us-west-2.amazonaws.com/s.cdpn.io/122460/skymap_negz_1024x1024.jpg

• https://s3-us-west-2.amazonaws.com/s.cdpn.io/122460/skymap_negz_512x512.jpg

• https://s3-us-west-2.amazonaws.com/s.cdpn.io/122460/skymap_posx_1024x1024.jpg

• https://s3-us-west-2.amazonaws.com/s.cdpn.io/122460/skymap_posx_512x512.jpg

• https://s3-us-west-2.amazonaws.com/s.cdpn.io/122460/skymap_posy_1024x1024.jpg

• https://s3-us-west-2.amazonaws.com/s.cdpn.io/122460/skymap_posy_512x512.jpg

• https://s3-us-west-2.amazonaws.com/s.cdpn.io/122460/skymap_posz_1024x1024.jpg

• https://s3-us-west-2.amazonaws.com/s.cdpn.io/122460/skymap_posz_512x512.jpg

⬆ Back to top

4. License

"Three.js: create Earth" is released under the MIT License

---

⬆ Back to top