Threejs

ThreeJS e un wrapper di webgl per l’implementazione di applicazioni grafiche 3D che sfruttano lo stack web, si basa sul concetto di grafo di rendering

--- title: threejs domain model --- flowchart TD A[renderer] B[scene] C[camera] D[light] E[mesh] F[geometry] G[vertex] H[face3] I[material] J[texture] K[image] E & D & C --> B --> A K --> J --> I --> E G & H --> F --> E

L’oggetto fondamentale e la scene, che contiene tutti gli elementi renderizzati dalla pipeline, nonché le informazioni di illuminazione e posizione della camera negli oggetti light e camera

L’oggetto mesh rappresenta la singola mesh 3D poligonale, di cui viene definita la geometria e le informazioni di colore e texture, nella scena possono essere presenti $n$ mesh 3D

Animation loop
#

Per poter renderizzare la scena e necessario creare un animation loop si procede come segue

// create an animation loop to render the sceene
function animate() {
	// funzione che comanda la pipeline di renderizzare la scena
  renderer.render( scene, camera );
// logica di aggiornamento della scena
}

// setta la funzione di cui sopra per l'esecuzione in base al refresh rate dello schermo
renderer.setAnimationLoop( animate );

Questo limita la capacita di ricezione degli input da parte dell’utente alla frequenza di refresh rate dello schermo (in caso di refresh rate a $60hz$ si potrà processare input 60 volte ogni secondo )

Manipolare la camera
#

Per consentire la renderizzazione della scena e necessario definire un’oggetto Camera che definisce i parametri di proiezione (sono disponibili diverse tipologie, prospettiva in primis per simulare la vista umana)

// si definisce una proiezione in prospettiva in questo caso
const camera = new THREE.PerspectiveCamera(
	75, // fov
	window.innerWidth / window.innerHeight, // aspect ratio
	0.1, // near
	1000  // far
);