I modelli 3D sono disponibili in centinai di formati, ognuno con uno scopo differente, diverse funzioni e complessità varie. Sebbene three.js metta a disposizione molti loader, la scelta del formato e del flusso di lavoro giusti farà risparmiare tempo e frustrazione in seguito. Con alcuni formati è difficile lavorare, possono essere inefficienti per le esperienze in tempo reale, o semplicemente non supportati al momento.
Questa guida mette a dispozione un flusso di lavoro consigliato per la maggior parte degli utenti, e dei suggerimenti per affrontare i malfunzionamenti nel caso in cui non funzionasse come ci si aspetta.
Se siete alle prime armi con la gestione di un server locale, iniziate prima di tutto a capire [link:#manual/introduction/How-to-run-things-locally come gestire le cose a livello locale]. Molti errori comuni nella visualizzazione dei modelli 3D possono essere evitati gestendo correttamente l'hosting dei file.
Dove possibile, consigliamo di utilizzare il formato glTF (GL Transmission Format). Entrambe le versioni .GLB e .GLTF sono supportate. Il formato glTF è incentrato sulla distribuzione di asset in runtime, è compatto da trasmette e veloce da caricare. Le carattestistiche includono mesh, materiali, texture, skin, skeleton, morph target, animazioni, luci, e camera.
Modelli glTF pubblici sono disponibili su siti come Sketchfab, o vari strumenti di sviluppo di modelli includono l'esportazione glTF:
Se i tuoi strumenti preferiti di sviluppo dei modelli, non supportano il formato glTF, considera di richiedere l'esportazione glTF agli autori, o di fare un post sul thread della roadmap di glTF.
Quando il formato glTF non è disponibile, i formati popolari come FBX, OBJ, o COLLADA sono comunque disponibili e mantenuti regolarmente.
Solo alcuni loader (ad es. [page:ObjectLoader]) sono inclusi di default con three.js — altri devono essere aggiunti all'applicazione individualmente.
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
Una volta importato un loader, sei pronto per aggiungere e caricare un modello alla scena. La sintassi varia a seconda del loader utilizzato - quando vengono utilizzati altri formati, contralla gli esempi e la documentazione del loader. Per il formato glTF, l'utilizzo con gli script globali sarebbe:
const loader = new GLTFLoader();
loader.load( 'path/to/model.glb', function ( gltf ) {
scene.add( gltf.scene );
}, undefined, function ( error ) {
console.error( error );
} );
Per maggiori dettagli consulta la [page:GLTFLoader documentazione GLTFLoader].
Hai passato ore a modellare un capolavoro artigianale, lo carichi nella pagina web e — oh no! 😭 è distorto, scolorito o mancante. Inizia con questi passaggi per la risoluzione dei problemi:
Se hai eseguito la procedura di risoluzione dei problemi qui sopra e il tuo modello ancora non funziona, il giusto approccio è chiedere aiuto per una soluzione più veloce. Scrivi una domanda sul forum three.js e, quando possibile, includi il tuo modello (o un modello più semplice con lo stesso problema) in qualsiasi formato disponibile. Includi informazioni sufficienti per consentire a qualcun altro di riprodurre rapidamente il problema - idealmente, una demo dal vivo.