“Earth ‒ Where we keep all of our stuff.”

This animated demo includes a photorealistic 3D earth and space scene, rendered in WebGL with three.js and served with Express 4.

Visit the live demo on CodePen: http://codepen.io/enesser/full/pgWjoW/.

Only the low-quality version is available on CodePen due to asset constraints.

You can also control the camera position by dragging the mouse and holding the right or left mouse button.

This demo is supported on all modern mobile devices where WebGL is supported.

Virtual reality mode can be toggled using the vr query string (true/false) documented under Launch Options. In VR mode, the camera is locked at a different perspective, the UI is hidden, and there are currently no controls.

This mode is still highly experimental. Default values are calibrated for Google Cardboard but this demo can work with other HMDs like the Oculus Rift.

You can toggle quality modes using the quality query string (high/low):

http://localhost:3000?quality=low

UI can also be toggled using the ui query string (true/false):

http://localhost:3000?ui=false

VR mode for virtual reality support can be toggled by using the vr query string (true/false):

http://localhost:3000?vr=true

VR mode also supports optionally setting eyeSeparation and focalLength:

http://localhost:3000?vr=true&vr-eyeSeparation=-.04
http://localhost:3000?vr=true&vr-focalLength=15

You’ll need Node to get started.

$ git clone https://github.com/enesser/earth-webgl && cd earth-webgl
$ npm install -g gulp      # Install Gulp task runner
$ npm install              # Install requirements
$ npm start                # Run the demo

For development, you can run Gulp:

$ npm install -g nodemon   # Install nodemon
$ gulp                     # Run the demo in development mode w/ nodemon

|-- public/               # auto-generated client assets (via Gulp), do not edit
|-- raw/                  # source directory for client assets
|   |-- js/               # source JavaScript
|   |-- models/           # source models for high and low quality
|   |-- scss/             # source Sass
|
|-- routes/               # controllers for site pages
|-- views/                # handlebars templates for site pages

This demo was created for a talk I did at Designory in February 2016: “Intro to 3D & VR on the Web.”

Topics:

• 3D modeling in Blender
• UV mapping
• bump maps
• specular maps
• composite materials
• OBJ and three.js JSON exporting and importing
• three.js camera, scene, lighting, and mesh basics
• Stereoscopic rendering and virtual reality

If you’re interested in this talk, please let me know.

Special thanks:

• Blender Guru for tips on creating a realistic 3D earth.
• NASA for source material for the model textures.

Copyright (c) 2016 Eric J Nesser, MIT

Original source material for the model textures provided by NASA.