(Creata pagina con "= '''La terra in 3D''' = Come ho pensato lo sviluppo dell'esempio. Occorre copiare lo zip <> Il file <tt>EarthStart.html</tt> è la base di partenza e nel seguito facc...") |
|||
Riga 6: | Riga 6: | ||
Il file <tt>EarthStart.html</tt> è la base di partenza e nel seguito faccio riferimento ad esso. | Il file <tt>EarthStart.html</tt> è la base di partenza e nel seguito faccio riferimento ad esso. | ||
− | <pre> | + | <pre><!DOCTYPE html> |
− | <!DOCTYPE html> | + | |
<html> | <html> | ||
<head> | <head> | ||
Riga 76: | Riga 75: | ||
</html> | </html> | ||
− | </ | + | </pre> |
+ | == 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 http://planetpixelemporium.com/earth.html]) | ||
+ | |||
+ | == Step aggiuntivo. == | ||
+ | |||
+ | Date delle posizioni GPS il comando addPositions le mostra sulla sfera |
Versione delle 13:01, 16 dic 2014
La terra in 3D
Come ho pensato lo sviluppo dell'esempio.
Occorre copiare lo zip <>
Il file EarthStart.html è la base di partenza e nel seguito faccio riferimento ad esso.
<!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