Loading-3D-models.html 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <base href="../../" />
  6. <script src="list.js"></script>
  7. <script src="page.js"></script>
  8. <link type="text/css" rel="stylesheet" href="page.css" />
  9. </head>
  10. <body>
  11. <h1>[name]</h1>
  12. <br />
  13. <p>
  14. 3D models are available in hundreds of file formats, each with different
  15. purposes, assorted features, and varying complexity. Although
  16. <a href="https://github.com/mrdoob/three.js/tree/dev/examples/js/loaders">
  17. three.js provides many loaders</a>, choosing the right format and
  18. workflow will save time and frustration later on. Some formats are
  19. difficult to work with, inefficient for realtime experiences, or simply not
  20. fully supported at this time.
  21. </p>
  22. <p>
  23. This guide provides a workflow recommended for most users, and suggestions
  24. for what to try if things don't go as expected.
  25. </p>
  26. <h2>Before we start</h2>
  27. <p>
  28. If you're new to running a local server, begin with
  29. [link:#manual/introduction/How-to-run-things-locally how to run things locally]
  30. first. Many common errors viewing 3D models can be avoided by hosting files
  31. correctly.
  32. </p>
  33. <h2>Recommended workflow</h2>
  34. <p>
  35. Where possible, we recommend using glTF (GL Transmission Format). Both
  36. <small>.GLB</small> and <small>.GLTF</small> versions of the format are
  37. well supported. Because glTF is focused on runtime asset delivery, it is
  38. compact to transmit and fast to load. Features include meshes, materials,
  39. textures, skins, skeletons, morph targets, animations, lights, and
  40. cameras.
  41. </p>
  42. <p>
  43. Public-domain glTF files are available on sites like
  44. <a href="https://sketchfab.com/models?features=downloadable&sort_by=-likeCount&type=models">
  45. Sketchfab</a>, or various tools include glTF export:
  46. </p>
  47. <ul>
  48. <li><a href="https://github.com/KhronosGroup/glTF-Blender-Exporter">glTF-Blender-Exporter</a> by the Khronos Group</li>
  49. <li><a href="https://github.com/KhronosGroup/COLLADA2GLTF">COLLADA2GLTF</a> by the Khronos Group</li>
  50. <li><a href="https://github.com/facebookincubator/FBX2glTF">FBX2GLTF</a> by Facebook</li>
  51. <li><a href="https://github.com/AnalyticalGraphicsInc/obj2gltf">OBJ2GLTF</a> by Analytical Graphics Inc</li>
  52. <li><a href="https://www.allegorithmic.com/products/substance-painter">Substance Painter</a> by Allegorithmic</li>
  53. <li><a href="https://www.foundry.com/products/modo">Modo</a> by Foundry</li>
  54. <li><a href="https://www.marmoset.co/toolbag/">Toolbag</a> by Marmoset</li>
  55. <li>&hellip;and <a href="https://github.com/khronosgroup/gltf#gltf-tools">many more</a></li>
  56. </ul>
  57. <p>
  58. If your preferred tools do not support glTF, consider requesting glTF
  59. export from the authors, or posting on
  60. <a href="https://github.com/KhronosGroup/glTF/issues/1051">the glTF roadmap thread</a>.
  61. </p>
  62. <p>
  63. When glTF is not an option, popular formats such as FBX, OBJ, or COLLADA
  64. are also available and regularly maintained.
  65. </p>
  66. <h2>Troubleshooting</h2>
  67. <p>
  68. You've spent hours modeling an artisanal masterpiece, you load it into
  69. the webpage, and — oh no! 😭 It's distorted, miscolored, or missing entirely.
  70. Start with these troubleshooting steps:
  71. </p>
  72. <ol>
  73. <li>
  74. Check the JavaScript console for errors, and make sure you've used an
  75. <em>onError</em> callback when calling <em>.load()</em> to log the result.
  76. </li>
  77. <li>
  78. View the model in another application. For glTF, drag-and-drop viewers
  79. are available for
  80. <a href="https://gltf-viewer.donmccurdy.com/">three.js</a> and
  81. <a href="http://sandbox.babylonjs.com/">babylon.js</a>. If the model
  82. appears correctly in one or more applications,
  83. <a href="https://github.com/mrdoob/three.js/issues/new">file a bug against three.js</a>.
  84. If the model cannot be shown in any application, we strongly encourage
  85. filing a bug with the application used to create the model.
  86. </li>
  87. <li>
  88. Try scaling the model up or down by a factor of 1000. Many models are
  89. scaled differently, and large models may not appear if the camera is
  90. inside the model.
  91. </li>
  92. <li>
  93. Look for failed texture requests in the network tab, like
  94. <em>C:\\Path\To\Model\texture.jpg</em>. Use paths relative to your
  95. model instead, such as <em>images/texture.jpg</em> — this may require
  96. editing the model file in a text editor.
  97. </li>
  98. </ol>
  99. <h2>Asking for help</h2>
  100. <p>
  101. If you've gone through the troubleshooting process above and your model
  102. still isn't working, the right approach to asking for help will get you to
  103. a solution faster. Post a question on the
  104. [three.js forum](https://discourse.threejs.org/) and, whenever possible,
  105. include your model (or a simpler model with the same problem) in any formats
  106. you have available. Include enough information for someone else to reproduce
  107. the issue quickly — ideally, a live demo.
  108. </p>
  109. </body>
  110. </html>