Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial

Three.js, la WebGL API semplificata

Canvas come base per sviluppare applicazioni e giochi 3D
Canvas come base per sviluppare applicazioni e giochi 3D
Link copiato negli appunti

Si parla molto WebGL API, un set di funzionalità, mutuate direttamente dalle famose OpenGL ES-2.0, che consentono di utilizzare il canvas come base di lavoro per lo sviluppo di applicazioni e giochi tridimensionali.

In questo capitolo vedremo come trarre vantaggio da questo nuovo set di API attraverso l'utilizzo di una comodissima libreria capace di occuparsi per noi di tutti i dettagli implementativi: Three.js.

Per sperimentare le funzionalità di questa libreria proviamo a costruire un visualizzatore di grafici in 3D che, dati una serie di punti in ingresso produca delle curve che ne rappresentano l'andamento.

Per iniziare scariciamo Three.js e lo posizioniamo all'interno di una cartella 'js' all'interno della cartella del progetto.

Predisponiamo anche un semplicissimo file index.html come segue:

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Un visualizzatore di grafici in 3D</title>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.4.1/build/cssreset/cssreset-min.css">
<!-- poche istruizioni per lo stile del canvas -->
<style>
html{ background: #000; }
canvas{  position: absolute;
         width: 969px; height: 544px;
		 border: 1px solid white;
		 top: 50%; left: 50%;
		 margin-top: -272px;
		 margin-left: -484px;
}
</style>
</head>
<body>
<!-- inclusione della libreria -->
<script src="js/Three.js"></script>
<script>
// qui va il codice del progetto
</script>
</body>
</html>

Anatomia di un progetto Three.js

Un progetto sviluppato in Three.js segue un'approccio tipicamente procedurale, per convenzione si
tende a sviluppare il codice all'interno di tre funzioni: 'init','animate' e 'render' così composte:

// da inserire all'interno del tag <script>
var camera, scene, renderer;
init();
animate();
function init() {
  // sezione di set-up di progetto
}
function animate() {
  // sezione per l'aggiornamento e l'animazione
  requestAnimationFrame( animate );
  render();
}
function render() {
  // sezione di disegno su canvas
  renderer.render( scene, camera );
}

Il progetto risulta così diviso in 3 segmenti logici:

  • inizializzazione
  • aggiornamento
  • disegno

Ovviamente è possibile evitare di invocare la funzione animate nel caso si stia sviluppando un progetto completamente statico, in tal caso si può accodare la funzione di disegno della scena a quella preposta per l'inizializzazione.

Da notare anche che la funzione animate fa uso del comodissimo metodo requestAnimationFrame che consente invocare consecutivamente la stessa funzione (in questo caso animate) all'interno di un ciclo altamente ottimizzato dal browser.

Ti consigliamo anche