Scena e Camera, creare il mondo 3D

Per creare il mondo tridimensionale che vogliamo manipolare e mostrare sullo schemo, cominciamo a lavorare sulla funzione init. Per prima cosa dobbiamo costruire i due oggetti essenziali al nostro progetto, ovvero:

• la scena sulla quale andremo a disegnare i grafici
• il punto di vista dell'utente che osserva la scena, la cosidetta Camera

Scriviamo quindi all'interno della funzione init:

scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 30, 969.0 / 544.0, 1, 4000 );
camera.position.z = 1500;
scene.add( camera );

La funzione Three.Scene crea l'oggetto Scene, al quale dovremo aver cura di aggiungere ogni altro oggetto che vorremo includere nel progetto utilizzando il metodo 'add', come avviene poche righe più in basso per la Camera.

Tipi di Camera

Esistono diversi tipi di Camera, due inclusi direttamente nella libreria e altri disponibili separatamente, quelli presenti nella libreria sono:

• OrtographicCamera, un tipo di camera che genera una visione assonometrica a partire da una proiezione ortogonale, un esempio dell'utilizzo di questa camera si può trovare cliccando qui;
• PerspectiveCamera, come il nome suggerisce questa Camera utilizza una proiezione prospettica, la più classica. Abbiamo scelto questo tipo di Camera per il progetto.

I parametri utilizzati per inizializzare la camera sono:

Campo	Descrizione
campo visivo verticale	In gradi
rapporto altezza/larghezza della Camera	Si ottiene dividendo le due dimensioni del canvas sul quale proietteremo questo progetto, così come specificate nel CSS
la distanza del piano più vicino del cono di proiezione	oggetti con una vicinanza alla Camera inferiore a questa non verranno rappresentati sul canvas
la distanza del piano più lontano del cono di proiezione	oggetti con una lontananza dalla Camera superiore a questa non verranno rappresentati sul canvas

Con questi parametri abbiamo spiegato a Three.js le caratteristiche della Camera, ora dobbiamo posizionare la Camera, che per default è locata alle coordinate 0,0,0 e 'guarda' verso le stesse coordinate (0,0,0).

Eseguiamo il compito spostando la Camera lungo l'asse z di una distanza sufficiente a visualizzare il grafico che stiamo per creare.

Ora possiamo procedere con la creazione dei punti necessari alla generazione dei grafici. in questo progetto generiamo un insieme di coordinate utilizzando funzioni note, nella realtà questi punti potrebbero benissimo essere erogati da un webservice, oppure provenire da un file csv di statistiche:

var points_line_1 = [];
var points_line_2 = [];
var points_line_3 = [];
for(x=0; x < 50; x++) {
  points_line_1[x] = Math.ceil(Math.sin((x*10/100)*3.14) * 50 - 30);
  points_line_2[x] = Math.ceil(Math.sin(((x*10-20)/100)*3.14) * (x*10-20)/3 );
  points_line_3[x] = Math.ceil(Math.cos((x*10/10)*3.14) * x*10*(x/5000) );
}
line  = generateLine(points_line_1, 0xFF0000, 80);
line2 = generateLine(points_line_2, 0xF4FF3D, 40);
line3 = generateLine(points_line_3, 0x0FD5FF, 0);
scene.add(line2);
scene.add(line);
scene.add(line3);

Con lo stesso comando con il quale abbiamo aggiunto la telecamera procediamo all'aggiunta dei tre oggetti contenenti gli insiemi di punti che vogliamo rappresentare. Ora dobbiamo sviluppare la funzione generateLine, che ricevuto in ingresso un array di punti, un colore e una distanza rispetto all'asse z dovrà generare un oggetto 3D, detto mesh, che rispecchi la forma voluta.

Sviluppiamo quindi la funzione generateLine:

function generateLine(points, color, z) {
  var width = 1200, height = 620, depth = 10,
      segments_width = points.length,
      segments_height = 1, segments_depth = 1;
  var line = new THREE.Mesh(
       new THREE.CubeGeometry(width, height, depth, segments_width, segments_height, segments_depth),
       new THREE.MeshLambertMaterial({ color: color, overdraw: true})
	  );
  line.castShadow = true;
  line.receiveShadow = true;
  line.position.y = 0;
  line.position.z = z;
  line.geometry.vertices[0].position.y = points[0]; //pos;
  line.geometry.vertices[1].position.y = points[0]; //pos;
  line.geometry.vertices[4].position.y = points[segments_width-1]; //pos;
  line.geometry.vertices[5].position.y = points[segments_width-1]; //pos;
  for(var x=8; x < (segments_width + 8) ; x++){
    line.geometry.vertices[x].position.y = points[x-7]; //pos;
    line.geometry.vertices[x+(segments_width-1)].position.y = points[x-7]; //pos;
  }
  return line;
}

Nella definizione delle variabili impostiamo una dimensione fissa dell'oggetto che stiamo creando (1200x620x10) e procediamo chiedendo a Three.js la generazione di un cubo dalle dimensioni richieste.

Three.js mette a disposizione alcune forme predefinite, così come la possibilità di importare oggetti dai più popolari programmi di modellazione 3D (la cartella nella quale cercare è utils/exporter, all'interno del repository ufficiale di progetto: https://github.com/mrdoob/three.js).

I parametri richiesti per la generazione di un Cubo sono:

• le tre dimensioni;
• il numero di segmenti nei quali ogni dimensione deve essere suddivisa, avere più segmenti su una data dimensione è essenziale se vogliamo, come nel nostro caso, poter manipolare la forma della mesh in quanto per farlo dovremo insistere proprio su di essi.