Three.js: potenzialità e utilizzi pratici

Cosa possiamo fare con Three.js

Con Three.js si possono creare pannelli per visualizzare e interagire con oggetti 3D che possono essere sia una decorazione che la feature principale del contenuto che si sta visualizzando. Per esempio un oggetto 3D potrebbe fare da sfondo per dare movimento al resto del contenuto o essere il protagonista di una sezione, permettendo a un e-commerce di valorizzare i suoi prodotti da ogni prospettiva.

Portando all’estremo l’uso di Three.js è possibile creare veri e propri videogiochi o ambienti esplorabili interattivi, definibili anche come metaverso, in cui l’utente si può muovere e può interagire con tutti gli elementi grafici.

Modelli 3D custom come file.glb

Three.js permette nativamente la creazione di forme tridimensionali di base, come cubi o sfere. Per ottenere forme più complesse è possibile importare file contenenti dei modelli 3D. Attualmente la tipologia migliore di file per questa operazione è il .glb, questo formato è la versione tradotta in binario del formato .gltf (Graphics Language Transmission Format) che è invece scritto in json e che è stato sviluppato con lo specifico intento di creare uno standard veloce e pratico per tutte applicazioni 3D che facilitasse lo sviluppo tecnologico dell’intera industria. È inoltre open source, il che rende possibile aggiungere estensioni per i vari bisogni dei singoli.

Un file.glb contiene tutte le informazioni necessarie a costruire un oggetto 3D insieme alle informazioni su materiali, texture e animazioni. Essendo un file binario non necessita di decodifica da parte della macchina che lo visualizza, così le informazioni passano direttamente dalla fonte alla scheda video e quindi allo schermo dell’utente, senza operazioni intermedie, ottimizzando al massimo le prestazioni.

Data la velocità di elaborazione e il peso ridotto, questo tipo di file è usato principalmente per la realizzazione di siti e applicativi web, videogiochi e software per visori VR/AR: tutti ambiti in cui il peso del file e il suo tempo di elaborazione sono fondamentali, sia per utilizzo di memoria che velocità di download in una risorsa online.

Come creare un modello 3D custom

La creazione di un file.glb è supportata da tutti i principali software di progettazione 3D, che permettono di esportare i modelli dal formato nativo del software in uso direttamente in glb, per esempio in Blender è sufficiente dal menu andare su File > Export > glTF 2.0 (. glb/. gltf).

Durante l’esportazione è solitamente possibile specificare se salvare anche le animazioni e le trasformazioni o solo il modello statico. In generale è possibile avere tutte le animazioni desiderate associate ai singoli elementi che possono poi essere recuperate e attivate tramite codice, sia tutte insieme che singolarmente.

 

 

Caricamento dei file.glb in Three.js

Per caricare un file.glb su three js è necessario importare il componente "GLTFLoader" , già presente di default nel codice di Three.js, che una volta inizializzato ci permette di caricare il file.glb e di lavorarci come se fosse un oggetto nativo di Three.js.

Una volta caricato infatti l’oggetto si presenta come un array che contiene tutti i singoli elementi 3D presenti nel file organizzati esattamente come nel software di progettazione usato per crearli, mantenendo gerarchia, nome e ordine. Ciò permette di selezionarli singolarmente nel caso siano necessarie ulteriori azioni sul singolo componente, come per esempio muoverlo o cambiarne il colore o la texture, fino a passarlo ad una funzione esterna che lo può gestire in maniera indipendente dal resto del contenuto del file.

import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';

const loader = new GLTFLoader(manager);

let object, mixer;

loader.load( 'model/object.glb', function ( gltf ) {

object= gltf.scene;

object.traverse((obj) => {

if(obj.name == “lotrek”){

doSomething(obj);

}

});

mixer = new THREE.AnimationMixer( gltf.scene );

mixer.clipAction( gltf.animations[ 0 ] ).play();

}, undefined, function ( error ) {

console.error( error );

});

. . .

function animate() {

requestAnimationFrame( animate );

render();

. . .

};

clock = new THREE.Clock();

function render(){

delta = clock.getDelta();

mixer.update( delta );

}

Nel mio caso, ho installato Three.js tramite npm: installazioni diverse avranno un path di import differente. Per seguire questo esempio è sufficiente installare Three.js eseguendo il comando: “npm install three” nella root del progetto.

Object = gltf.scene; assegna alla variabile object (disponibile poi anche globalmente) il contenuto del file, la funzione .traverse(obj) permette poi di eseguire un ciclo nei singoli elementi consentendo di selezionarne uno in particolare e di trattarlo come un oggetto nativo di Threejs.

La variabile mixer serve invece come istanza dell’animazione associata al modello 3D, viene prima inizializzata quando si carica l’oggetto e in seguito, all’interno del ciclo di render, viene eseguita passandogli il tempo trascorso dall’ultima esecuzione, sfruttando il componente clock di Three.js tramite la funzione mixer.update( delta ); in modo che possa eseguire l’animazione con il giusto tempismo ad ogni aggiornamento di frame. Essendo codice javascript l’animazione può essere attivata e disattivata a runtime anche con un semplice “if” o con una gestione più complessa, per esempio in base a ciò che l’utente sta facendo in un dato momento.

Da notare come un singolo file.glb non deve per forza contenere un solo modello 3D ma può contenere anche un’intera scena composta da decine o centinaia di oggetti, comprese luci e camere (il nostro punto di vista sulla scena), che divengono poi comunque tutti selezionabili singolarmente una volta caricato il file, sta quindi allo sviluppatore in base alle sue necessità decidere se costruire il suo ambiente 3D posizionando gli oggetti tramite codice caricandoli singolarmente o crearlo per intero con l’uso di un software esterno per poi avere un oggetto unico.

Una volta caricati modelli e animazioni è possibile lavorare come si farebbe con oggetti nativi di Three.js per sviluppare e gestire la scena aggiungendo ciò che manca ai modelli 3D, cioè le interazioni con l’utente, spaziando da un semplice visualizzatore che ruota un oggetto seguendo il mouse fino al vero e proprio game design.

Qualche link utile per approfondire
Three.js
File .glb
File .gltf