Loading-3D-models.html 7.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155
  1. <!DOCTYPE html>
  2. <html lang="it">
  3. <head>
  4. <meta charset="utf-8">
  5. <base href="../../../" />
  6. <script src="page.js"></script>
  7. <link type="text/css" rel="stylesheet" href="page.css" />
  8. </head>
  9. <body>
  10. <h1>Caricare modelli 3D ([name])</h1>
  11. <p>
  12. I modelli 3D sono disponibili in centinai di formati, ognuno con uno scopo differente, diverse funzioni
  13. e complessità varie. Sebbene <a href="https://github.com/mrdoob/three.js/tree/dev/examples/jsm/loaders" target="_blank" rel="noopener">
  14. 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.
  15. Con alcuni formati è difficile lavorare, possono essere inefficienti per le esperienze in tempo reale, o semplicemente non supportati al momento.
  16. </p>
  17. <p>
  18. Questa guida mette a dispozione un flusso di lavoro consigliato per la maggior parte degli utenti, e dei suggerimenti
  19. per affrontare i malfunzionamenti nel caso in cui non funzionasse come ci si aspetta.
  20. </p>
  21. <h2>Prima di iniziare</h2>
  22. <p>
  23. Se siete alle prime armi con la gestione di un server locale,
  24. iniziate prima di tutto a capire [link:#manual/introduction/Installation installation].
  25. Molti errori comuni nella visualizzazione dei modelli 3D possono essere evitati gestendo correttamente l'hosting dei file.
  26. </p>
  27. <h2>Workflow consigliato</h2>
  28. <p>
  29. Dove possibile, consigliamo di utilizzare il formato glTF (GL Transmission Format).
  30. Entrambe le versioni <small>.GLB</small> e <small>.GLTF</small> sono supportate.
  31. Il formato glTF è incentrato sulla distribuzione di asset in runtime, è compatto da trasmette e veloce da caricare.
  32. Le carattestistiche includono mesh, materiali, texture, skin, skeleton, morph target, animazioni, luci, e camera.
  33. </p>
  34. <p>
  35. 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">
  36. Sketchfab</a>, o vari strumenti di sviluppo di modelli includono l'esportazione glTF:
  37. </p>
  38. <ul>
  39. <li><a href="https://www.blender.org/" target="_blank" rel="noopener">Blender</a> di the Blender Foundation</li>
  40. <li><a href="https://www.allegorithmic.com/products/substance-painter" target="_blank" rel="noopener">Substance Painter</a> di Allegorithmic</li>
  41. <li><a href="https://www.foundry.com/products/modo" target="_blank" rel="noopener">Modo</a> di Foundry</li>
  42. <li><a href="https://www.marmoset.co/toolbag/" target="_blank" rel="noopener">Toolbag</a> di Marmoset</li>
  43. <li><a href="https://www.sidefx.com/products/houdini/" target="_blank" rel="noopener">Houdini</a> di SideFX</li>
  44. <li><a href="https://labs.maxon.net/?p=3360" target="_blank" rel="noopener">Cinema 4D</a> di MAXON</li>
  45. <li><a href="https://github.com/KhronosGroup/COLLADA2GLTF" target="_blank" rel="noopener">COLLADA2GLTF</a>di the Khronos Group</li>
  46. <li><a href="https://github.com/facebookincubator/FBX2glTF" target="_blank" rel="noopener">FBX2GLTF</a> di Facebook</li>
  47. <li><a href="https://github.com/AnalyticalGraphicsInc/obj2gltf" target="_blank" rel="noopener">OBJ2GLTF</a> di Analytical Graphics Inc</li>
  48. <li>&hellip;e <a href="http://github.khronos.org/glTF-Project-Explorer/" target="_blank" rel="noopener">molti altri</a></li>
  49. </ul>
  50. <p>
  51. Se i tuoi strumenti preferiti di sviluppo dei modelli, non supportano il formato glTF,
  52. considera di richiedere l'esportazione glTF agli autori,
  53. 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>.
  54. </p>
  55. <p>
  56. Quando il formato glTF non è disponibile, i formati popolari come FBX, OBJ, o COLLADA
  57. sono comunque disponibili e mantenuti regolarmente.
  58. </p>
  59. <h2>Caricamento</h2>
  60. <p>
  61. Solo alcuni loader (ad es. [page:ObjectLoader]) sono inclusi di default con three.js — altri devono essere aggiunti all'applicazione individualmente.
  62. </p>
  63. <code>
  64. import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
  65. </code>
  66. <p>
  67. Una volta importato un loader, sei pronto per aggiungere e caricare un modello alla scena. La sintassi
  68. varia a seconda del loader utilizzato - quando vengono utilizzati altri formati, contralla gli esempi e la
  69. documentazione del loader. Per il formato glTF, l'utilizzo con gli script globali sarebbe:
  70. </p>
  71. <code>
  72. const loader = new GLTFLoader();
  73. loader.load( 'path/to/model.glb', function ( gltf ) {
  74. scene.add( gltf.scene );
  75. }, undefined, function ( error ) {
  76. console.error( error );
  77. } );
  78. </code>
  79. <p>
  80. Per maggiori dettagli consulta la [page:GLTFLoader documentazione GLTFLoader].
  81. </p>
  82. <h2>Troubleshooting</h2>
  83. <p>
  84. Hai passato ore a modellare un capolavoro artigianale, lo carichi nella pagina web e — oh no! 😭
  85. è distorto, scolorito o mancante.
  86. Inizia con questi passaggi per la risoluzione dei problemi:
  87. </p>
  88. <ol>
  89. <li>
  90. Controlla la console JavaScript per vedere se ci sono errori,
  91. ed accertati di aver usato la funzione di callback `onError` del meotodo `.load()`
  92. per visualizzare il risultato nella console.
  93. </li>
  94. <li>
  95. Visualizza il modello in un'altra applicazione. Per il formato glTF, sono disponibili visualizzatori drag-and-drop per
  96. <a href="https://gltf-viewer.donmccurdy.com/" target="_blank" rel="noopener">three.js</a> e
  97. <a href="https://sandbox.babylonjs.com/" target="_blank" rel="noopener">babylon.js</a>.
  98. Se il modello viene visualizzato correttamente in una o più applicazioni,
  99. <a href="https://github.com/mrdoob/three.js/issues/new" target="_blank" rel="noopener">segnala il bug a three.js</a>.
  100. Se il modello non è visualizzabile in nessuna applicazione, incoraggiamo vivamente di segnalare un bug
  101. all'applicazione utilizzata per creare il modello.
  102. </li>
  103. <li>
  104. Prova a scalare il modello verso l'alto o il basso di un fattore di 1000. Molti modelli sono scalati diversamente,
  105. e molti modelli di grandi dimensioni non vengono visualizzati se la telecamera si trova all'interno del modello.
  106. </li>
  107. <li>
  108. Prova ad aggiungere e posizionare una luce nella scena. Il modello potrebbe essere nascosto nell'oscurità.
  109. </li>
  110. <li>
  111. Cerca le richieste delle texture fallite nel tab network degli strumenti per sviluppatori del browser,
  112. come `"C:\\Path\To\Model\texture.jpg"`. Utilizza path relativi al tuo modello come `images/texture.jpg` -
  113. ciò potrebbe richiedere una modifica del file del modello in un editor di testo.
  114. </li>
  115. </ol>
  116. <h2>Chiedere aiuto</h2>
  117. <p>
  118. Se hai eseguito la procedura di risoluzione dei problemi qui sopra e il tuo modello ancora non funziona,
  119. il giusto approccio è chiedere aiuto per una soluzione più veloce. Scrivi una domanda sul
  120. <a href="https://discourse.threejs.org/" target="_blank" rel="noopener">forum three.js</a> e, quando possibile,
  121. includi il tuo modello (o un modello più semplice con lo stesso problema) in qualsiasi formato disponibile.
  122. Includi informazioni sufficienti per consentire a qualcun altro di riprodurre rapidamente il problema - idealmente, una demo dal vivo.
  123. </p>
  124. </body>
  125. </html>