You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
156 lines
7.1 KiB
156 lines
7.1 KiB
3 years ago
|
<!DOCTYPE html>
|
||
|
|
<html lang="it">
|
||
|
|
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<base href="../../../" />
|
||
|
|
<script src="page.js"></script>
|
||
|
|
<link type="text/css" rel="stylesheet" href="page.css" />
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<h1>Caricare modelli 3D ([name])</h1>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
I modelli 3D sono disponibili in centinai di formati, ognuno con uno scopo differente, diverse funzioni
|
||
|
|
e complessità varie. Sebbene <a href="https://github.com/mrdoob/three.js/tree/dev/examples/jsm/loaders" target="_blank" rel="noopener">
|
||
|
|
three.js metta a disposizione molti loader</a>, 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.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
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.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<h2>Prima di iniziare</h2>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
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.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<h2>Workflow consigliato</h2>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
Dove possibile, consigliamo di utilizzare il formato glTF (GL Transmission Format).
|
||
|
|
Entrambe le versioni <small>.GLB</small> e <small>.GLTF</small> 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.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
Modelli glTF pubblici sono disponibili su siti come <a href="https://sketchfab.com/models?features=downloadable&sort_by=-likeCount&type=models" target="_blank" rel="noopener">
|
||
|
|
Sketchfab</a>, o vari strumenti di sviluppo di modelli includono l'esportazione glTF:
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<ul>
|
||
|
|
<li><a href="https://www.blender.org/" target="_blank" rel="noopener">Blender</a> di the Blender Foundation</li>
|
||
|
|
<li><a href="https://www.allegorithmic.com/products/substance-painter" target="_blank" rel="noopener">Substance Painter</a> di Allegorithmic</li>
|
||
|
|
<li><a href="https://www.foundry.com/products/modo" target="_blank" rel="noopener">Modo</a> di Foundry</li>
|
||
|
|
<li><a href="https://www.marmoset.co/toolbag/" target="_blank" rel="noopener">Toolbag</a> di Marmoset</li>
|
||
|
|
<li><a href="https://www.sidefx.com/products/houdini/" target="_blank" rel="noopener">Houdini</a> di SideFX</li>
|
||
|
|
<li><a href="https://labs.maxon.net/?p=3360" target="_blank" rel="noopener">Cinema 4D</a> di MAXON</li>
|
||
|
|
<li><a href="https://github.com/KhronosGroup/COLLADA2GLTF" target="_blank" rel="noopener">COLLADA2GLTF</a>di the Khronos Group</li>
|
||
|
|
<li><a href="https://github.com/facebookincubator/FBX2glTF" target="_blank" rel="noopener">FBX2GLTF</a> di Facebook</li>
|
||
|
|
<li><a href="https://github.com/AnalyticalGraphicsInc/obj2gltf" target="_blank" rel="noopener">OBJ2GLTF</a> di Analytical Graphics Inc</li>
|
||
|
|
<li>…e <a href="http://github.khronos.org/glTF-Project-Explorer/" target="_blank" rel="noopener">molti altri</a></li>
|
||
|
|
</ul>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
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 <a href="https://github.com/KhronosGroup/glTF/issues/1051" target="_blank" rel="noopener">sul thread della roadmap di glTF</a>.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
Quando il formato glTF non è disponibile, i formati popolari come FBX, OBJ, o COLLADA
|
||
|
|
sono comunque disponibili e mantenuti regolarmente.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<h2>Caricamento</h2>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
Solo alcuni loader (ad es. [page:ObjectLoader]) sono inclusi di default con three.js — altri devono essere aggiunti all'applicazione individualmente.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<code>
|
||
|
|
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
|
||
|
|
</code>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
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:
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<code>
|
||
|
|
const loader = new GLTFLoader();
|
||
|
|
|
||
|
|
loader.load( 'path/to/model.glb', function ( gltf ) {
|
||
|
|
|
||
|
|
scene.add( gltf.scene );
|
||
|
|
|
||
|
|
}, undefined, function ( error ) {
|
||
|
|
|
||
|
|
console.error( error );
|
||
|
|
|
||
|
|
} );
|
||
|
|
</code>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
Per maggiori dettagli consulta la [page:GLTFLoader documentazione GLTFLoader].
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<h2>Troubleshooting</h2>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
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:
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<ol>
|
||
|
|
<li>
|
||
|
|
Controlla la console JavaScript per vedere se ci sono errori,
|
||
|
|
ed accertati di aver usato la funzione di callback `onError` del meotodo `.load()`
|
||
|
|
per visualizzare il risultato nella console.
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
Visualizza il modello in un'altra applicazione. Per il formato glTF, sono disponibili visualizzatori drag-and-drop per
|
||
|
|
<a href="https://gltf-viewer.donmccurdy.com/" target="_blank" rel="noopener">three.js</a> e
|
||
|
|
<a href="https://sandbox.babylonjs.com/" target="_blank" rel="noopener">babylon.js</a>.
|
||
|
|
Se il modello viene visualizzato correttamente in una o più applicazioni,
|
||
|
|
<a href="https://github.com/mrdoob/three.js/issues/new" target="_blank" rel="noopener">segnala il bug a three.js</a>.
|
||
|
|
Se il modello non è visualizzabile in nessuna applicazione, incoraggiamo vivamente di segnalare un bug
|
||
|
|
all'applicazione utilizzata per creare il modello.
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
Prova a scalare il modello verso l'alto o il basso di un fattore di 1000. Molti modelli sono scalati diversamente,
|
||
|
|
e molti modelli di grandi dimensioni non vengono visualizzati se la telecamera si trova all'interno del modello.
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
Prova ad aggiungere e posizionare una luce nella scena. Il modello potrebbe essere nascosto nell'oscurità.
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
Cerca le richieste delle texture fallite nel tab network degli strumenti per sviluppatori del browser,
|
||
|
|
come `"C:\\Path\To\Model\texture.jpg"`. Utilizza path relativi al tuo modello come `images/texture.jpg` -
|
||
|
|
ciò potrebbe richiedere una modifica del file del modello in un editor di testo.
|
||
|
|
</li>
|
||
|
|
</ol>
|
||
|
|
|
||
|
|
<h2>Chiedere aiuto</h2>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
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
|
||
|
|
<a href="https://discourse.threejs.org/" target="_blank" rel="noopener">forum three.js</a> 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.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
|
||
|
|
</html>
|