Da WIKI CoderDojo Firenze.

La terra in 3D

Come ho pensato lo sviluppo dell'esempio.

Occorre copiare lo zip Earth3D.zip e il file delle immagini aggiuntive Earth3DImmaginiAdd.zip sulla macchina del coderNinja.

Il file EarthFinale.html è il risultato alla fine del tutorial.

Il file EarthStart.html è la base di partenza e nel seguito faccio riferimento ad esso, in copia qui sotto.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Il Mondoooo</title>
	<style>
		body {
			margin: 0px;
			padding: 0px;
		}
	</style>
	<script src="js/three.min.js"></script>
	<script src="js/TrackballControls.js"></script>
	<script src="js/coderDojoLib.js"></script>
  </head>
  <body onload="start()">
    <script>
		var canvas3d, r = 16;
		function start() {
			canvas3d = new cdRender3d();

			var geometry = new THREE.SphereGeometry(r, 32, 32);
			var material  = new THREE.MeshBasicMaterial( { color: 0x0000ff } );

			canvas3d.addMesh(geometry, material);


			canvas3d.runRender();
		}

// 1 Step
//			var material = new THREE.MeshPhongMaterial();
//			canvas3d.addLight();
//			canvas3d.addSpot(0xaf9f8f, 0.3);

// 2 Step
//			material.map = THREE.ImageUtils.loadTexture('img/earthmap1k.jpg', undefined, canvas3d.getRender());
//			material.bumpMap = THREE.ImageUtils.loadTexture('img/earthbump1k.jpg', undefined, canvas3d.getRender());
//			material.bumpScale = 0.6;
//			material.specularMap = THREE.ImageUtils.loadTexture('img/earthspec1k.jpg', undefined, canvas3d.getRender());
//			material.specular  = new THREE.Color('grey');
//

// Alternative
// riga 20		//canvas3d = new cdRender3d({ctrl: true});
// riga 22
			//var geometry = new THREE.OctahedronGeometry(r, 0);
			//var geometry = new THREE.DodecahedronGeometry(r, 0);
			//var geometry = new THREE.BoxGeometry(r, r, r);
			//var geometry = new THREE.TorusGeometry( r, 0.4 * r, 32, 64 );

// riga 25		//material.map = THREE.ImageUtils.loadTexture('img/BabyTux.png', undefined, canvas3d.getRender());
		
		
// posizioni GPS di Firenze, Parigi, Londra, New York, Sidney
		//var parameters = [ 
		//	[ 43.771417, 11.253836, 1.4 ], 
		//	[ 48.859405, 2.353880, 1.1 ],
		//	[ 51.518809, -0.127056, 1.3 ],
		//	[ 40.735661, -73.996460, 1.5 ],
		//	[ -33.849974, 151.208077, 1.2 ],
		//];

// Riga 45			//canvas3d.addPositions(parameters);

    </script>
  </body>
</html>

Partenza

Il file base crea una palla o meglio un cerchio blu su sfondo nero.

Cambiando il valore di color alla riga 23 si cambia il colore della palla

Passo 1)

Commento riga 23 e aggiungo la prima riga di step1

--> var material = new THREE.MeshPhongMaterial();

Tutto nero, manca una luce

Aggiungo a riga 28 una luce, la seconda riga di step1

--> canvas3d.addLight();

Ricompare un cerchio (bianco grigio), il colore si può cambiare passando il valore numerico in addLight es: 0xc2 è blu, 0xc20000 è rosso.

In partenza è stato usato un materiale base che ha un colore, adesso usiamo un materiale riflettente, quindi serve una luce per vederlo.

L'impressione è ancora piatta, aggiungiamo un faretto per creare l'effetto 3D con luci e ombre.

Aggiungo a riga 29 un faretto, la terza riga di step1

--> canvas3d.addSpot(0xaf9f8f, 0.3);

Il primo parametro è il colore, il secondo l'intensità.

Notate che il faretto sta ruotando intorno alla sfera.

Passo 2)

Diamo l'aspetto della terra alla sfera.

Aggiungo a riga 25 la texture della terra, la prima riga di step2

--> material.map = THREE.ImageUtils.loadTexture('img/earthmap1k.jpg', undefined, canvas3d.getRender());

Cambiando la riga 20 ovvero aggiungendo il parametro {ctrl: true}, passiamo dalla rotazione automatica a quella manuale.

Trascinando (btn sinistro) il mouse la terra ruota, con la rotella si fa lo zoom.

Aggiungo a riga 26 e 27 la rugosità, la seconda e terza riga di step2

--> material.bumpMap = THREE.ImageUtils.loadTexture('img/earthbump1k.jpg', undefined, canvas3d.getRender());

--> material.bumpScale = 0.6;

Il parametro bumpScale dà la proporzione di rugosità definita nella texture.

Aggiungo a riga 28 e 29 l'effetto specchio, la quarta e quinta riga di step2

--> material.specularMap = THREE.ImageUtils.loadTexture('img/earthspec1k.jpg', undefined, canvas3d.getRender());

--> material.specular = new THREE.Color('grey');


Alternative

Nello step alternative ho messo alcune modifiche oltre al già citato controllo manuale, e ai giochi con i colori

Cambiando la gemetria, dalla sfera al toro ...

Cambiando le texture o cambiando pianeta (le mappe sono prese da http://planetpixelemporium.com/earth.html)

Step aggiuntivo.

Date delle posizioni GPS il comando addPositions le mostra sulla sfera