<!DOCTYPE html> <html> <head> <meta charset=utf-8> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"> <title>Live Flights</title> <style> body { margin: 0; } canvas { width: 100%; height: 100% } </style> </head> <style> body { font-family: sans-serif; margin: 0px; border: 0px; padding: 0px; color: white; } #control { position: absolute; left: 0; top: 0; padding: 20px; } h2 { margin-top: 0; margin-bottom: 10px; font-size: 20px; font-weight: normal; } .to { color: #FF6464b8 } .from { color: #8AECE4b8; } #property-list { margin-left: -3px; } .view { display: inline-block; font-size: 10px; height: 12px; line-height: 10px; border: 1px solid #979797; color: #979797; margin: 3px; padding: 4px; cursor: pointer; background: none; } .view.selected { border: 1px solid white; color: white; } #pauseButtonId { position: absolute; border: 1px solid #979797; color: #979797; font-size: 10px; height: 12px; left: 0; bottom: 0; margin-left: 20px; margin-bottom: 10px; padding: 4px; } #tooltip { position: absolute; display: none; font-size: 10px; background: rgba(0,0,0,0.4); padding: 4px; } </style> <body style='margin: 0px; background-color: #000000; overflow: hidden;'> <div id="control"> <h2>live flights <span class="to">to</span> or <span class="from">from</span></h2> <div id="property-list"></div> </div> <div id="pauseButtonId">Pause rotation</div> <div id="tooltip"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/fetch-jsonp/1.1.3/fetch-jsonp.min.js"></script> <script src="https://d3js.org/d3.v5.min.js"></script> <script src="./js/three.min.js"></script> <script src="./js/CustomOrbitControls.js"></script> <script src="./js/threex.domevents.js"></script> <script> var runAnim = true; var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 ); var RADIUS = 1; var MAXHEIGHT = 0.04; var pauseButton = document.getElementById('pauseButtonId'); pauseButton.onclick = function ToggleAnimation() { if (runAnim) { pauseButton.innerHTML = 'Restart rotation'; runAnim = false; } else { pauseButton.innerHTML = 'Pause rotation'; runAnim = true; } } var renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); renderer.sortObjects = false; document.body.appendChild( renderer.domElement ); var domEvents = new THREEx.DomEvents(camera, renderer.domElement); addLights(); var world = new THREE.Object3D(); addEarth(world); addClouds(world); scene.add(world); camera.position.z = 2; var rotSpeed = -0.0001; var controls = new OrbitControls( camera ); controls.maxDistance = 10; controls.minDistance = 1.2; var animate = function () { requestAnimationFrame( animate ); if (runAnim) { var x = camera.position.x; var z = camera.position.z; camera.position.x = x * Math.cos(rotSpeed) + z * Math.sin(rotSpeed); camera.position.z = z * Math.cos(rotSpeed) - x * Math.sin(rotSpeed); } renderer.render( scene, camera ); controls.update(); }; window.addEventListener( 'resize', onWindowResize, false ); function onWindowResize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize( window.innerWidth, window.innerHeight ); } animate(); function addEarth(obj) { // flat earth // var geometry = new THREE.CylinderGeometry( 1, 1, 0.05, 64 ); var geometry = new THREE.SphereGeometry( RADIUS, 32, 32 ); var material = new THREE.MeshPhongMaterial({ map: new THREE.TextureLoader().load( './img/8081_earthmap4k.jpg') ,bumpMap: new THREE.TextureLoader().load( './img/8081_earthbump4k.jpg') ,bumpScale: 0.007 ,specularMap: new THREE.TextureLoader().load( './img/8081_earthspec4k.jpg') ,specular: new THREE.Color(0x0E0E0E) }) obj.add( new THREE.Mesh( geometry, material )); return obj; } function addClouds(obj) { var spGeo = new THREE.SphereGeometry(RADIUS, 36, 36 ); var cloudsTexture = THREE.ImageUtils.loadTexture( "./img/8081_earthhiresclouds4K.jpg" ); var materialClouds = new THREE.MeshLambertMaterial( { color: 0xffffff, map: cloudsTexture, transparent:true, opacity:0.4 } ); meshClouds = new THREE.Mesh( spGeo, materialClouds ); meshClouds.scale.set( 1.015, 1.015, 1.015 ); obj.add( meshClouds ); } function addLights() { var lights = []; lights[ 0 ] = new THREE.PointLight( 0x909090, 1, 0 ); lights[ 1 ] = new THREE.PointLight( 0xffffff, 1, 0 ); lights[ 2 ] = new THREE.PointLight( 0xffffff, 1, 0 ); lights[ 3 ] = new THREE.AmbientLight( 0x706570 ); // soft white light lights[ 0 ].position.set( 0, 400, 0 ); lights[ 1 ].position.set( 400, 000, 100 ); lights[ 2 ].position.set( - 100, - 200, - 100 ); scene.add( lights[ 0 ] ); scene.add( lights[ 1 ] ); scene.add( lights[ 2 ] ); scene.add( lights[ 3 ] ); } </script> </body> </html>