|
|
@@ -1,297 +0,0 @@
|
|
|
-<!DOCTYPE html>
|
|
|
-<html lang="en">
|
|
|
- <head>
|
|
|
- <title>three.js webgl - trackball camera - earth</title>
|
|
|
- <meta charset="utf-8">
|
|
|
- <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
|
|
|
- <style>
|
|
|
- body {
|
|
|
- background: #000;
|
|
|
- color: #EEE;
|
|
|
- padding: 0;
|
|
|
- margin: 0;
|
|
|
- font-weight: bold;
|
|
|
- overflow: hidden;
|
|
|
-
|
|
|
- font-family: Monospace;
|
|
|
- font-size: 13px;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
-
|
|
|
- #info {
|
|
|
- position: absolute;
|
|
|
- top: 0px;
|
|
|
- width: 100%;
|
|
|
- padding: 5px;
|
|
|
- z-index: 100;
|
|
|
- }
|
|
|
-
|
|
|
- a { color: green; }
|
|
|
- b { color: green; }
|
|
|
- </style>
|
|
|
-
|
|
|
- <script src="../build/three.min.js"></script>
|
|
|
- <script src="js/controls/TrackballControls.js"></script>
|
|
|
-
|
|
|
- <script src="js/Detector.js"></script>
|
|
|
- <script src="js/libs/stats.min.js"></script>
|
|
|
-
|
|
|
- </head>
|
|
|
-
|
|
|
- <body>
|
|
|
-
|
|
|
- <div id="info">
|
|
|
- <a href="http://threejs.org" target="_blank">three.js</a> - earth [trackball camera]<br/><br/>
|
|
|
- <b>MOVE</b> mouse & press <b>LEFT/A:</b> rotate, <b>MIDDLE/S:</b> zoom, <b>RIGHT/D:</b> pan
|
|
|
- </div>
|
|
|
-
|
|
|
- <script>
|
|
|
-
|
|
|
- var radius = 6371,
|
|
|
- tilt = 0.41,
|
|
|
- rotationSpeed = 0.1,
|
|
|
-
|
|
|
- cloudsScale = 1.005,
|
|
|
- moonScale = 0.23,
|
|
|
-
|
|
|
- height = window.innerHeight,
|
|
|
- width = window.innerWidth,
|
|
|
-
|
|
|
- container, stats,
|
|
|
-
|
|
|
- camera, controls, scene, renderer,
|
|
|
- geometry, meshPlanet, meshClouds, meshMoon,
|
|
|
- dirLight, ambientLight,
|
|
|
-
|
|
|
- clock = new THREE.Clock();
|
|
|
-
|
|
|
- window.onload = function() {
|
|
|
-
|
|
|
- if ( !Detector.webgl ) {
|
|
|
-
|
|
|
- Detector.addGetWebGLMessage();
|
|
|
- return;
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- init();
|
|
|
- animate();
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- function init() {
|
|
|
-
|
|
|
- container = document.createElement( 'div' );
|
|
|
- document.body.appendChild( container );
|
|
|
-
|
|
|
- scene = new THREE.Scene();
|
|
|
-
|
|
|
- renderer = new THREE.WebGLRenderer( { clearAlpha: 1, clearColor: 0x000000, antialias: true } );
|
|
|
- renderer.setSize( width, height );
|
|
|
- renderer.sortObjects = false;
|
|
|
- renderer.autoClear = false;
|
|
|
-
|
|
|
- //
|
|
|
-
|
|
|
- renderer.gammaInput = true;
|
|
|
- renderer.gammaOutput = true;
|
|
|
-
|
|
|
- //
|
|
|
-
|
|
|
- container.appendChild( renderer.domElement );
|
|
|
-
|
|
|
- camera = new THREE.PerspectiveCamera( 25, width / height, 50, 1e7 );
|
|
|
- camera.position.z = radius * 7;
|
|
|
-
|
|
|
- controls = new THREE.TrackballControls( camera, renderer.domElement );
|
|
|
-
|
|
|
- controls.rotateSpeed = 1.0;
|
|
|
- controls.zoomSpeed = 1.2;
|
|
|
- controls.panSpeed = 0.2;
|
|
|
-
|
|
|
- controls.noZoom = false;
|
|
|
- controls.noPan = false;
|
|
|
-
|
|
|
- controls.staticMoving = false;
|
|
|
- controls.dynamicDampingFactor = 0.3;
|
|
|
-
|
|
|
- controls.minDistance = radius * 1.1;
|
|
|
- controls.maxDistance = radius * 100;
|
|
|
-
|
|
|
- controls.keys = [ 65, 83, 68 ]; // [ rotateKey, zoomKey, panKey ]
|
|
|
-
|
|
|
- dirLight = new THREE.DirectionalLight( 0xFFFFFF );
|
|
|
- dirLight.position.set( -1, 0, 1 ).normalize();
|
|
|
- scene.add( dirLight );
|
|
|
-
|
|
|
- var planetTexture = THREE.ImageUtils.loadTexture( "textures/planets/earth_atmos_2048.jpg" ),
|
|
|
- cloudsTexture = THREE.ImageUtils.loadTexture( "textures/planets/earth_clouds_1024.png" ),
|
|
|
- normalTexture = THREE.ImageUtils.loadTexture( "textures/planets/earth_normal_2048.jpg" ),
|
|
|
- specularTexture = THREE.ImageUtils.loadTexture( "textures/planets/earth_specular_2048.jpg" ),
|
|
|
- moonTexture = THREE.ImageUtils.loadTexture( "textures/planets/moon_1024.jpg" );
|
|
|
-
|
|
|
- var shader = THREE.ShaderUtils.lib[ "normal" ],
|
|
|
- uniforms = THREE.UniformsUtils.clone( shader.uniforms );
|
|
|
-
|
|
|
- uniforms[ "tNormal" ].value = normalTexture;
|
|
|
- uniforms[ "uNormalScale" ].value.set( 0.85, 0.85 );
|
|
|
-
|
|
|
- uniforms[ "tDiffuse" ].value = planetTexture;
|
|
|
- uniforms[ "tSpecular" ].value = specularTexture;
|
|
|
-
|
|
|
- uniforms[ "enableAO" ].value = false;
|
|
|
- uniforms[ "enableDiffuse" ].value = true;
|
|
|
- uniforms[ "enableSpecular" ].value = true;
|
|
|
-
|
|
|
- uniforms[ "uDiffuseColor" ].value.setHex( 0xffffff );
|
|
|
- uniforms[ "uSpecularColor" ].value.setHex( 0x666666 );
|
|
|
- uniforms[ "uAmbientColor" ].value.setHex( 0x000000 );
|
|
|
-
|
|
|
- uniforms[ "uShininess" ].value = 20;
|
|
|
-
|
|
|
- uniforms[ "uDiffuseColor" ].value.convertGammaToLinear();
|
|
|
- uniforms[ "uSpecularColor" ].value.convertGammaToLinear();
|
|
|
- uniforms[ "uAmbientColor" ].value.convertGammaToLinear();
|
|
|
-
|
|
|
- var materialNormalMap = new THREE.ShaderMaterial({
|
|
|
- fragmentShader: shader.fragmentShader,
|
|
|
- vertexShader: shader.vertexShader,
|
|
|
- uniforms: uniforms,
|
|
|
- lights: true
|
|
|
- });
|
|
|
-
|
|
|
-
|
|
|
- // planet
|
|
|
-
|
|
|
- geometry = new THREE.SphereGeometry( radius, 100, 50 );
|
|
|
- geometry.computeTangents();
|
|
|
-
|
|
|
- meshPlanet = new THREE.Mesh( geometry, materialNormalMap );
|
|
|
- meshPlanet.rotation.y = 0;
|
|
|
- meshPlanet.rotation.z = tilt;
|
|
|
- scene.add( meshPlanet );
|
|
|
-
|
|
|
-
|
|
|
- // clouds
|
|
|
-
|
|
|
- var materialClouds = new THREE.MeshLambertMaterial( { color: 0xffffff, map: cloudsTexture, transparent:true } );
|
|
|
-
|
|
|
- meshClouds = new THREE.Mesh( geometry, materialClouds );
|
|
|
- meshClouds.scale.set( cloudsScale, cloudsScale, cloudsScale );
|
|
|
- meshClouds.rotation.z = tilt;
|
|
|
- scene.add( meshClouds );
|
|
|
-
|
|
|
-
|
|
|
- // moon
|
|
|
-
|
|
|
- var materialMoon = new THREE.MeshPhongMaterial( { color: 0xffffff, map: moonTexture } );
|
|
|
-
|
|
|
- meshMoon = new THREE.Mesh( geometry, materialMoon );
|
|
|
- meshMoon.position.set( radius * 5, 0, 0 );
|
|
|
- meshMoon.scale.set( moonScale, moonScale, moonScale );
|
|
|
- scene.add( meshMoon );
|
|
|
-
|
|
|
-
|
|
|
- // stars
|
|
|
-
|
|
|
- var starsGeometry = new THREE.Geometry();
|
|
|
-
|
|
|
- for ( var i = 0; i < 1500; i ++ ) {
|
|
|
-
|
|
|
- var vertex = new THREE.Vector3();
|
|
|
- vertex.x = Math.random() * 2 - 1;
|
|
|
- vertex.y = Math.random() * 2 - 1;
|
|
|
- vertex.z = Math.random() * 2 - 1;
|
|
|
- vertex.multiplyScalar( radius );
|
|
|
-
|
|
|
- starsGeometry.vertices.push( vertex );
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- var stars,
|
|
|
- starsMaterials = [
|
|
|
- new THREE.ParticleBasicMaterial( { color: 0x555555, size: 2, sizeAttenuation: false } ),
|
|
|
- new THREE.ParticleBasicMaterial( { color: 0x555555, size: 1, sizeAttenuation: false } ),
|
|
|
- new THREE.ParticleBasicMaterial( { color: 0x333333, size: 2, sizeAttenuation: false } ),
|
|
|
- new THREE.ParticleBasicMaterial( { color: 0x3a3a3a, size: 1, sizeAttenuation: false } ),
|
|
|
- new THREE.ParticleBasicMaterial( { color: 0x1a1a1a, size: 2, sizeAttenuation: false } ),
|
|
|
- new THREE.ParticleBasicMaterial( { color: 0x1a1a1a, size: 1, sizeAttenuation: false } )
|
|
|
- ];
|
|
|
-
|
|
|
- for ( i = 10; i < 30; i ++ ) {
|
|
|
-
|
|
|
- stars = new THREE.ParticleSystem( starsGeometry, starsMaterials[ i % 6 ] );
|
|
|
-
|
|
|
- stars.rotation.x = Math.random() * 6;
|
|
|
- stars.rotation.y = Math.random() * 6;
|
|
|
- stars.rotation.z = Math.random() * 6;
|
|
|
-
|
|
|
- var s = i * 10;
|
|
|
- stars.scale.set( s, s, s );
|
|
|
-
|
|
|
- stars.matrixAutoUpdate = false;
|
|
|
- stars.updateMatrix();
|
|
|
-
|
|
|
- scene.add( stars );
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- stats = new Stats();
|
|
|
- stats.domElement.style.position = 'absolute';
|
|
|
- stats.domElement.style.top = '0px';
|
|
|
- stats.domElement.style.zIndex = 100;
|
|
|
- container.appendChild( stats.domElement );
|
|
|
-
|
|
|
- window.addEventListener( 'resize', onWindowResize, false );
|
|
|
-
|
|
|
- };
|
|
|
-
|
|
|
- function onWindowResize( event ) {
|
|
|
-
|
|
|
- width = window.innerWidth;
|
|
|
- height = window.innerHeight;
|
|
|
-
|
|
|
- renderer.setSize( width, height );
|
|
|
-
|
|
|
- camera.aspect = width / height;
|
|
|
- camera.updateProjectionMatrix();
|
|
|
-
|
|
|
- controls.handleResize();
|
|
|
-
|
|
|
- };
|
|
|
-
|
|
|
- function animate() {
|
|
|
-
|
|
|
- requestAnimationFrame( animate );
|
|
|
-
|
|
|
- render();
|
|
|
- stats.update();
|
|
|
-
|
|
|
- };
|
|
|
-
|
|
|
- function render() {
|
|
|
-
|
|
|
- var delta = clock.getDelta();
|
|
|
-
|
|
|
- meshPlanet.rotation.y += rotationSpeed * delta;
|
|
|
- meshClouds.rotation.y += 1.25 * rotationSpeed * delta;
|
|
|
-
|
|
|
- var angle = delta * rotationSpeed;
|
|
|
-
|
|
|
- meshMoon.position = new THREE.Vector3(
|
|
|
- Math.cos( angle ) * meshMoon.position.x - Math.sin( angle ) * meshMoon.position.z,
|
|
|
- 0,
|
|
|
- Math.sin( angle ) * meshMoon.position.x + Math.cos( angle ) * meshMoon.position.z
|
|
|
- );
|
|
|
- meshMoon.rotation.y -= angle;
|
|
|
-
|
|
|
- controls.update();
|
|
|
-
|
|
|
- renderer.clear();
|
|
|
- renderer.render( scene, camera );
|
|
|
-
|
|
|
- };
|
|
|
-
|
|
|
- </script>
|
|
|
- </body>
|
|
|
-</html>
|
Mr.doob