doctype html html head meta charset utf 8 meta name viewport content width device width initial scale 1 0 title WebGL Earth title style body margin 0 overflow hidden background color 000 height 400pt webgl error font 15px 30px monospace text align center color fff margin 50px webgl error a color fff style head body div id webgl div script src https cdnjs cloudflare com ajax libs three js r128 three min js script script src https unpkg com three 0 108 0 examples js controls TrackballControls js script script function var webglEl document getElementById webgl var width window innerWidth height window innerHeight Earth params var radius 0 5 segments 32 rotation 6 var scene new THREE Scene THREE ImageUtils crossOrigin var camera new THREE PerspectiveCamera 45 width height 0 01 1000 camera position z 1 5 var renderer new THREE WebGLRenderer renderer setSize width height scene add new THREE AmbientLight 0x333333 var light new THREE DirectionalLight 0xffffff 1 light position set 5 3 5 scene add light var sphere createSphere radius segments sphere rotation y rotation scene add sphere var clouds createClouds radius segments clouds rotation y rotation scene add clouds var stars createStars 90 64 scene add stars var controls new THREE TrackballControls camera webglEl appendChild renderer domElement render function render controls update sphere rotation y 0 0005 clouds rotation y 0 0005 requestAnimationFrame render renderer render scene camera function createSphere radius segments return new THREE Mesh new THREE SphereGeometry radius segments segments new THREE MeshPhongMaterial map THREE ImageUtils loadTexture https notebook xbdev net var images 2_no_clouds_4k jpg bumpMap THREE ImageUtils loadTexture https notebook xbdev net var images elev_bump_4k jpg bumpScale 0 005 specularMap THREE ImageUtils loadTexture https notebook xbdev net var images water_4k png specular new THREE Color grey function createClouds radius segments return new THREE Mesh new THREE SphereGeometry radius 0 003 segments segments new THREE MeshPhongMaterial map THREE ImageUtils loadTexture https notebook xbdev net var images fair_clouds_4k png transparent true function createStars radius segments return new THREE Mesh new THREE SphereGeometry radius segments segments new THREE MeshBasicMaterial map THREE ImageUtils loadTexture https notebook xbdev net var images galaxy_starfield png side THREE BackSide script body html
trols camera webglEl appendChild renderer domElement render function render controls update sphere rotation y 0 0005 clouds rotation y 0 0005 requestAnimationFrame render renderer render scene camera function createSphere radius segments return new THREE Mesh new THREE SphereGeometry radius segments segments new THREE MeshPhongMaterial map THREE ImageUtils loadTexture https notebook xbdev net var images 2_no_clouds_4k jpg bumpMap THREE ImageUtils loadTexture https notebook xbdev net var images elev_bump_4k jpg bumpScale 0 005 specularMap THREE ImageUtils loadTexture https notebook xbdev net var images water_4k png specular new THREE Color grey function createClouds radius segments return new THREE Mesh new THREE SphereGeometry radius 0 003 segments segments new THREE MeshPhongMaterial map THREE ImageUtils loadTexture https notebook xbdev net var images fair_clouds_4k png transparent true function createStars radius segments return new THREE Mesh new THREE SphereGeometry radius segments segments new THREE MeshBasicMaterial map THREE ImageUtils loadTexture https notebook xbdev net var images galaxy_starfield png side THREE BackSide script body html