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.
168 lines
7.3 KiB
168 lines
7.3 KiB
2 years ago
|
<!DOCTYPE html>
|
||
|
|
<html lang="fr">
|
||
|
|
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<base href="../../../" />
|
||
|
|
<script src="page.js"></script>
|
||
|
|
<link type="text/css" rel="stylesheet" href="page.css" />
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<h1>Importer des modèles 3D ([name])</h1>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
Les modèles 3D sont disponibles dans des centaines de formats, chacun ayant des objectifs
|
||
|
|
différents, des fonctionnalités assorties, et une complexité variable. Même si
|
||
|
|
<a href="https://github.com/mrdoob/three.js/tree/dev/examples/jsm/loaders" target="_blank" rel="noopener">
|
||
|
|
three.js fournit plusieurs loaders</a>, choisir le bon format et
|
||
|
|
workflow vous fera gagner du temps et vous épargnera beaucoup de frustration par la suite. Certains formats sont
|
||
|
|
difficiles à appréhender, inefficaces pour les exépriences en temps-réel, ou simplement
|
||
|
|
pas entièrement supportés pour le moment.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
Ce guide vous fournit un workflow recommandé pour la plupart des utilisateurs, et des suggestions
|
||
|
|
concernant quoi essayer si les choses ne se déroulent pas comme prévu.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<h2>Avant de commencer</h2>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
Si vous n'êtes pas familier avec le fait de lancer un serveur local, commencez par
|
||
|
|
[link:#manual/introduction/How-to-run-things-locally how to run things locally].
|
||
|
|
Plusieurs erreurs communes concernant les modèles 3D peuvent-être évitées en hébergeant les fichiers
|
||
|
|
correctement.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<h2>Workflow recommandé</h2>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
Dans la mesure du possible, nous recommandons l'utilisation de glTF (GL Transmission Format). Les versions
|
||
|
|
<small>.GLB</small> et <small>.GLTF</small> du format sont
|
||
|
|
bien supportées. Étant-donné que glTF se concentre sur la réduction du temps d'exécution du chargement des modèles, il est
|
||
|
|
compact et rapide à transmettre. Les fonctionnalités inclusent sont les meshes, les matériaux,
|
||
|
|
les textures, les skins, les squelettes, les morph targets, les animations, les lumières, et les
|
||
|
|
caméras.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
Les fichiers glTF appartenant au domaine public sont disponibles sur des sites comme
|
||
|
|
<a href="https://sketchfab.com/models?features=downloadable&sort_by=-likeCount&type=models" target="_blank" rel="noopener">
|
||
|
|
Sketchfab</a>, différents outils incluent l'export de glTF:
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<ul>
|
||
|
|
<li><a href="https://www.blender.org/" target="_blank" rel="noopener">Blender</a> par the Blender Foundation</li>
|
||
|
|
<li><a href="https://www.allegorithmic.com/products/substance-painter" target="_blank" rel="noopener">Substance Painter</a> par Allegorithmic</li>
|
||
|
|
<li><a href="https://www.foundry.com/products/modo" target="_blank" rel="noopener">Modo</a> par Foundry</li>
|
||
|
|
<li><a href="https://www.marmoset.co/toolbag/" target="_blank" rel="noopener">Toolbag</a> par Marmoset</li>
|
||
|
|
<li><a href="https://www.sidefx.com/products/houdini/" target="_blank" rel="noopener">Houdini</a> par SideFX</li>
|
||
|
|
<li><a href="https://labs.maxon.net/?p=3360" target="_blank" rel="noopener">Cinema 4D</a> par MAXON</li>
|
||
|
|
<li><a href="https://github.com/KhronosGroup/COLLADA2GLTF" target="_blank" rel="noopener">COLLADA2GLTF</a> par the Khronos Group</li>
|
||
|
|
<li><a href="https://github.com/facebookincubator/FBX2glTF" target="_blank" rel="noopener">FBX2GLTF</a> par Facebook</li>
|
||
|
|
<li><a href="https://github.com/AnalyticalGraphicsInc/obj2gltf" target="_blank" rel="noopener">OBJ2GLTF</a> par Analytical Graphics Inc</li>
|
||
|
|
<li>…et <a href="http://github.khronos.org/glTF-Project-Explorer/" target="_blank" rel="noopener">beaucoup d'autres</a></li>
|
||
|
|
</ul>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
Si votre outil de prédilection n'inclut pas le support des glTF, pensez à demander
|
||
|
|
aux auteurs d'inclure l'export des glTF, ou postez sur
|
||
|
|
<a href="https://github.com/KhronosGroup/glTF/issues/1051" target="_blank" rel="noopener">the glTF roadmap thread</a>.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
Quand glTF n'est pas utilisable, des formats populaires comme FBX, OBJ, ou COLLADA
|
||
|
|
sont également disponibles et régulièrement maintenus.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<h2>Charger les modèles</h2>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
Seulement quelques loaders (e.g. [page:ObjectLoader]) sont inclus par défaut dans
|
||
|
|
three.js — les autres doivent être ajoutés individuellement à votre application.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<code>
|
||
|
|
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
|
||
|
|
</code>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
Une fois que vous avez importé un loader, vous pouvez ajouter un modèle à votre scène. La syntaxe varie selon
|
||
|
|
les loaders — quand vous utilisez un autre format, jetez un oeil à la documentation de ce
|
||
|
|
loader. Pour glTF, l'utilisation avec des scripts globaux doit-être:
|
||
|
|
</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>
|
||
|
|
Voir [page:GLTFLoader GLTFLoader documentation] pour plus de détails.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<h2>Dépannage</h2>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
Vous avez passé des heures à modeler votre chef-d'oeuvre artisanal, vous le chargez sur
|
||
|
|
la page web, et — oh non! 😭 Il est tordu, mal coloré, ou tout simplement porté-disparu.
|
||
|
|
Commencez par ces étapes de dépannage:
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<ol>
|
||
|
|
<li>
|
||
|
|
Vérifiez la console JavaScript à la recherche d'erreurs, et assurez-vous d'utiliser un callback
|
||
|
|
`onError` à l'appel de `.load()` pour afficher le résultat.
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
Visualisez le modèle dans une autre application. Pour glTF, des visualiseurs de type cliquez-glissez
|
||
|
|
sont disponibles pour
|
||
|
|
<a href="https://gltf-viewer.donmccurdy.com/" target="_blank" rel="noopener">three.js</a> et
|
||
|
|
<a href="https://sandbox.babylonjs.com/" target="_blank" rel="noopener">babylon.js</a>. Si le modèle
|
||
|
|
apparaît correctement dans une ou plusieurs autres applications,
|
||
|
|
<a href="https://github.com/mrdoob/three.js/issues/new" target="_blank" rel="noopener">signalez une erreur auprès de three.js</a>.
|
||
|
|
Si le modèle ne peut être visualisé dans n'importe quelle application, nous encourageons fortement
|
||
|
|
le signalement d'un bug auprès de l'application avec laquelle vous avez réalisé le modèle 3D.
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
Essayez de divisier ou de multiplier la taille du modèle par un facteur de 1000. Plusieurs modèles sont mis à
|
||
|
|
l'échelles différemment, et les gros modèles peuvent ne pas apparaître si la caméra est
|
||
|
|
à l'intérieur du modèle.
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
Essayez d'ajouter et de positionner une source de lumière. Le modèle peut-être caché dans le noir.
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
Cherchez des requêtes concernant des textures erronnées dans votre onglet réseau, comme
|
||
|
|
`"C:\\Path\To\Model\texture.jpg"`. Utilisez des chemins relatifs menant à votre
|
||
|
|
modèle à la place, comme `images/texture.jpg` — cela peut nécessiter
|
||
|
|
la modification du fichier du modèle dans un éditeur de texte.
|
||
|
|
</li>
|
||
|
|
</ol>
|
||
|
|
|
||
|
|
<h2>Demander de l'aide</h2>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
Si vous avez effectué le processus de dépannage ci-dessus et que votre modèle
|
||
|
|
ne fonctionne toujours pas, utiliser la bonne approche pour demander de l'aide vous mènera
|
||
|
|
plus rapidement à la solution. Postez une question sur le
|
||
|
|
<a href="https://discourse.threejs.org/" target="_blank" rel="noopener">forum three.js</a> et, incluez dès que possible,
|
||
|
|
votre modèle (ou un modèle plus simple avec le même problème) dans n'importe quel format
|
||
|
|
qui vous est disponible. Incluez sufisamment d'informations pour que quelqu'un puisse reproduire
|
||
|
|
ce problème rapidement — idéalement, une démo live.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
|
||
|
|
</html>
|