Da WIKI CoderDojo Firenze.
Versione del 16 dic 2014 alle 12:48 di Mbert (Discussione | contributi)
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.
<tt> <!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> </tt>