javascript
/
three.js
mirror of https://github.com/tazdij/three.js.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167
							<!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>&hellip;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>