Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Feat: Translation in French of first part Manuel Three.js #23050

Closed
wants to merge 1 commit into from
Closed

Feat: Translation in French of first part Manuel Three.js #23050

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
108 changes: 108 additions & 0 deletions docs/manual/fr/introduction/Bibliothèques-et-plugins.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,108 @@
<!DOCTYPE html>
<html lang="en">
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more. 

<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>[name]</h1>

<p class="desc">
Vous trouverez ici des bibliothèques et des plugins compatibles développés en externe pour three.js. Cette
liste et les packages associés sont maintenus par la communauté et ne sont pas garantis
être à jour. Si vous souhaitez mettre à jour cette liste, faites des relations pull request !
</p>

<h3>Physiques</h3>

<ul>
<li>[link:https://github.com/lo-th/Oimo.js/ Oimo.js]</li>
<li>[link:https://enable3d.io/ enable3d]</li>
<li>[link:https://github.com/kripken/ammo.js/ ammo.js]</li>
<li>[link:https://github.com/pmndrs/cannon-es cannon-es]</li>
</ul>

<h3>Post-traitement</h3>

<p>
En plus des [link:https://github.com/mrdoob/three.js/tree/dev/examples/jsm/postprocessing effets de
post-traitement officiels de three.js],
la prise en charge de certains effets et frameworks supplémentaires est disponible via des bibliothèques
externes.
</p>

<ul>
<li>[link:https://github.com/vanruesc/postprocessing post-traitement]</li>
</ul>

<h3>Intersection et performances Raycast</h3>

<ul>
<li>[link:https://github.com/gkjohnson/three-mesh-bvh three-mesh-bvh]</li>
</ul>

<h3>Formats de fichier</h3>

<p>
En plus des [link:https://github.com/mrdoob/three.js/tree/dev/examples/jsm/loaders chargeurs officiels de
three.js],
la prise en charge de certains formats supplémentaires est disponible via des bibliothèques externes.
</p>

<ul>
<li>[link:https://github.com/gkjohnson/urdf-loaders/tree/master/javascript urdf-loader]</li>
<li>[link:https://github.com/NASA-AMMOS/3DTilesRendererJS 3d-tiles-renderer-js]</li>
<li>[link:https://github.com/kaisalmen/WWOBJLoader WebWorker OBJLoader]</li>
<li>[link:https://github.com/IFCjs/web-ifc-three IFC.js]</li>
</ul>

<h3>Géométrie</h3>

<ul>
<li>[link:https://github.com/spite/THREE.MeshLine THREE.MeshLine]</li>
</ul>

<h3>Texte 3D et mise en page</h3>

<ul>
<li>[link:https://github.com/protectwise/troika/tree/master/packages/troika-three-text troika-three-text]</li>
<li>[link:https://github.com/felixmariotto/three-mesh-ui three-mesh-ui]</li>
</ul>

<h3>Système de particules</h3>

<ul>
<li>[link:https://github.com/creativelifeform/three-nebula three-nebula]</li>
</ul>

<h3>Cinématique inverse</h3>

<ul>
<li>[link:https://github.com/jsantell/THREE.IK THREE.IK]</li>
<li>[link:https://github.com/lo-th/fullik fullik]</li>
</ul>

<h3>IA de jeu</h3>

<ul>
<li>[link:https://mugen87.github.io/yuka/ yuka]</li>
<li>[link:https://github.com/donmccurdy/three-pathfinding three-pathfinding]</li>
</ul>

<h3>Wrappers et Frameworks</h3>

<ul>
<li>[link:https://aframe.io/ A-Frame]</li>
<li>[link:https://github.com/pmndrs/react-three-fiber react-three-fiber]</li>
<li>[link:https://github.com/ecsyjs/ecsy-three ECSY]</li>
</ul>

<p><small>Traduit en Français par <a href="https://github.com/David-Moisan" target="_blank">David Moisan</a></small>
</p>
</body>

</html>
182 changes: 182 additions & 0 deletions docs/manual/fr/introduction/Chargement-de-modeles-3D.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,182 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">
<base href="../../../" />
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>

<body>
<h1>[name]</h1>

<p>
Les modèles 3D sont disponibles dans des centaines de formats de fichiers, chacun avec des
fins, caractéristiques variées et complexité variable. Bien que
<a href="https://github.com/mrdoob/three.js/tree/dev/examples/jsm/loaders" target="_blank"
rel="noopener">three.js fournit de nombreux chargeurs</a>
, en choisissant le bon format et le flux de travail vous fera gagner du temps et de la frustration plus tard.
Certains formats sont
difficile à travailler, inefficace pour les expériences en temps réel, ou tout simplement pas
entièrement pris en charge pour le moment.
</p>

<p>
Ce guide fournit un flux de travail recommandé pour la plupart des utilisateurs, et des suggestions
pour avoir de quoi essayer si les choses ne se passent pas comme prévu.
</p>

<h2>Avant de commencer</h2>

<p>
Si vous débutez dans l'exécution d'un serveur local, commencez par
[link:#manual/introduction/How-to-run-things-locally how to run things locally]
en premier. De nombreuses erreurs courantes de visualisation des modèles 3D peuvent être évitées en hébergeant
des fichiers
correctement.
</p>

<h2>FLux de travail recommandé</h2>

<p>
Dans la mesure du possible, nous vous recommandons d'utiliser glTF (GL Transmission Format). Les deux
Les versions <small>.GLB</small> et <small>.GLTF</small> du format sont
Bien soutenu. Étant donné que glTF se concentre sur la livraison d'actifs d'exécution, il est
compact pour transmettre et rapide à charger. Les caractéristiques comprennent des mailles, des matériaux,
textures, skins, squelettes, cibles de morphing, animations, lumières et caméra.
</p>

<p>
Les fichiers glTF du 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>,
ou divers outils incluent l'exportation 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">Bien
d'autres</a></li>
</ul>

<p>
Si vos outils préférés ne prennent pas en charge glTF, envisagez de demander un glTF
exporter aux auteurs, ou poster sur
<a href="https://github.com/KhronosGroup/glTF/issues/1051" target="_blank" rel="noopener">le fil de la feuille
de route glTF</a>.
</p>

<p>
Lorsque glTF n'est pas une option, les formats populaires tels que FBX, OBJ ou COLLADA
sont également disponibles et régulièrement entretenus.
</p>

<h2>Chargement</h2>

<p>
Seuls quelques chargeurs (par exemple [page:ObjectLoader]) sont inclus par défaut avec
three.js — d'autres doivent être ajoutés individuellement à votre application.
</p>

<code>
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
</code>

<p>
Une fois que vous avez importé un chargeur, vous êtes prêt à ajouter un modèle à votre scène. La syntaxe varie
selon
les différents chargeurs - lorsque vous utilisez un autre format, consultez les exemples et la documentation
pour cela.
Pour glTF, l'utilisation avec des scripts globaux serait :
</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 à modéliser un chef-d'œuvre artisanal, vous le chargez dans
la page Web, et — oh non ! 😭 Il est déformé, décoloré ou ne s'affiche pas entièrement.
Commencez par ces étapes de dépannage:
</p>

<ol>
<li>
Vérifiez la console JavaScript pour les erreurs et assurez-vous que vous avez utilisé un
callback <em>onError</em> lors de l'appel de <em>.load()</em> pour enregistrer le résultat.
</li>
<li>
Affichez le modèle dans une autre application. Pour les visionneuses glTF, le glisser-déposer
est disponibles pour <a href="https://gltf-viewer.donmccurdy.com/" target="_blank"
rel="noopener">three.js</a> et
<a href="http://sandbox.babylonjs.com/" target="_blank" rel="noopener">babylon.js</a>. Si le modèle
apparait correctement dans une où plusieurs applications,
<a href="https://github.com/mrdoob/three.js/issues/new" target="_blank" rel="noopener">signaler un bug sur
le repository three.js</a>.
Si le modèle ne s'affiche dans aucune application, nous encourageons fortement
le dépôt d'un bug avec l'application utilisée pour créer le modèle.
</li>
<li>
Essayez d'augmenter ou de réduire le modèle par un facteur de 1000. De nombreux modèles sont
mis à l'échelle différemment, et les grands 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 l'obscurité.
</li>
<li>
Recherchez les demandes de texture ayant échoué dans l'onglet réseau, comme
<em>C:\\Path\To\Model\texture.jpg</em>.
Utilisez des chemins relatifs à votre modèle à la place, tel que
<em>images/texture.jpg</em> - cela peut nécessiter l'édition du fichier modèle dans un éditeur de texte.
</li>
</ol>

<h2>Demandez de l'aide</h2>

<p>
Si vous avez suivi le processus de dépannage ci-dessus et que votre modèle
ne fonctionne toujours pas, la bonne approche pour demander de l'aide et avoir une solution plus rapidement.
Posez une question sur le <a href="https://discourse.threejs.org/" target="_blank" rel="noopener">forum
three.js</a>
et, dans la mesure du possible, inclure votre modèle (ou un modèle plus simple avec le même problème) dans
n'importe quel format.
Inclure suffisamment d'informations pour que quelqu'un d'autre puisse les répondre
au problème rapidement - idéalement, une démonstration en direct.
</p>

<p><small>Traduit en Français par <a href="https://github.com/David-Moisan" target="_blank">David Moisan</a></small></p>
</body>

</html>
77 changes: 77 additions & 0 deletions docs/manual/fr/introduction/Comment-creer-du-contenu-VR.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<base href="../../../" />
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body>
<h1>[name]</h1>

<p>
Ce guide fournit un bref aperçu des composants de base d'une application de réalité virtuelle basée sur le Web.
fait avec three.js.
</p>

<h2>Flux de travail</h2>

<p>
Tout d'abord, vous devez inclure [link: https://github.com/mrdoob/three.js/blob/master/examples/jsm/webxr/VRButton.js VRButton.js]
dans votre projet.
</p>

<code>
import { VRButton } from 'three/examples/jsm/webxr/VRButton.js';
</code>

<p>
*VRButton.createButton()* fait deux choses importantes : Il crée un bouton qui indique
Compatibilité RV. De plus, il lance une session VR si l'utilisateur active le bouton. La seule chose qu'il vous reste as
à faire est d'ajouter la ligne de code suivante à votre application.
</p>

<code>
document.body.appendChild( VRButton.createButton( renderer ) );
</code>

<p>
Ensuite, vous devez indiquer à votre instance de *WebGLRenderer* pour activer le rendu XR.
</p>

<code>
renderer.xr.enabled = true;
</code>

<p>
Enfin, vous devez ajuster votre boucle d'animation car nous ne pouvons pas utiliser notre bien connu
Fonction *window.requestAnimationFrame()*. Pour les projets VR, nous utilisons [page:WebGLRenderer.setAnimationLoop setAnimationLoop].
Le code minimal ressemble à ceci :
</p>

<code>
renderer.setAnimationLoop( function () {
renderer.render( scene, camera );
});
</code>

<h2>Prochaines étapes</h2>

<p>
Jetez un œil à l'un des exemples WebVR officiels pour voir ce workflow en action.<br /><br />

[example:webxr_vr_ballshooter WebXR / VR / ballshooter]<br />
[example:webxr_vr_cubes WebXR / VR / cubes]<br />
[example:webxr_vr_dragging WebXR / VR / dragging]<br />
[example:webxr_vr_paint WebXR / VR / paint]<br />
[example:webxr_vr_panorama_depth WebXR / VR / panorama_depth]<br />
[example:webxr_vr_panorama WebXR / VR / panorama]<br />
[example:webxr_vr_rollercoaster WebXR / VR / rollercoaster]<br />
[example:webxr_vr_sandbox WebXR / VR / sandbox]<br />
[example:webxr_vr_sculpt WebXR / VR / sculpt]<br />
[example:webxr_vr_video WebXR / VR / video]
</p>

<p><small>Traduit en Français par <a href="https://github.com/David-Moisan" target="_blank">David Moisan</a></small></p>
</body>
</html>
Loading