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

Docs: Manual translation into french #24516

Merged
merged 2 commits into from
Aug 22, 2022
Merged

Docs: Manual translation into french #24516

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5ff7808
Manual translation to french
AlexandreAllard Aug 20, 2022
b2064a0
Fixing h1 titles
AlexandreAllard Aug 20, 2022
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
3 changes: 2 additions & 1 deletion docs/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@ <h1><a href="https://threejs.org">three.js</a></h1>
<option value="ja">日本語</option>
<option value="it">it</option>
<option value="pt-br">pt-br</option>
<option value="fr">fr</option>
</select>
</div>
<div id="content"></div>
Expand Down Expand Up @@ -88,7 +89,7 @@ <h1><a href="https://threejs.org">three.js</a></h1>

if ( /^(api|manual|examples)/.test( hash ) ) {

const hashLanguage = /^(api|manual|examples)\/(en|ar|ko|zh|ja|it|pt-br)\//.exec( hash );
const hashLanguage = /^(api|manual|examples)\/(en|ar|ko|zh|ja|it|pt-br|fr)\//.exec( hash );

if ( hashLanguage === null ) {

Expand Down
35 changes: 35 additions & 0 deletions docs/list.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1204,6 +1204,41 @@

}

},
"fr": {

"Manuel": {

"Débuter": {
"Créer une scène": "manual/fr/introduction/Creating-a-scene",
"Installation": "manual/fr/introduction/Installation",
"Compatibilité WebGL": "manual/fr/introduction/WebGL-compatibility-check",
"Exécuter localement": "manual/fr/introduction/How-to-run-things-locally",
"Dessiner des lignes": "manual/fr/introduction/Drawing-lines",
"Créer un texte": "manual/fr/introduction/Creating-text",
"Importer des modèles 3D": "manual/fr/introduction/Loading-3D-models",
"Librairies et Plugins": "manual/fr/introduction/Libraries-and-Plugins",
"FAQ": "manual/fr/introduction/FAQ",
"Liens Utiles": "manual/fr/introduction/Useful-links"
},

"Étapes Suivantes": {
"Mettre les éléments à jour": "manual/fr/introduction/How-to-update-things",
"Supprimer un objet": "manual/fr/introduction/How-to-dispose-of-objects",
"Créer du contenu VR": "manual/fr/introduction/How-to-create-VR-content",
"Utiliser le post-processing": "manual/fr/introduction/How-to-use-post-processing",
"Matrices de transformation": "manual/fr/introduction/Matrix-transformations",
"Système d'animation": "manual/fr/introduction/Animation-system",
"Gestion des couleurs": "manual/fr/introduction/Color-management"
},

"Outils de build": {
"Tests avec NPM": "manual/fr/buildTools/Testing-with-NPM"
}

}

}


}
257 changes: 257 additions & 0 deletions docs/manual/fr/buildTools/Testing-with-NPM.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,257 @@
<!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>Tests avec NPM ([name])</h1>

<p class="desc">
Ici vous sera expliqué comment obtenir three.js dans un environnement [link:https://nodejs.org/en/ node.js] pour que
vous puissez exécuter des tests automatisés. Les tests peuvent êtres lancés en lignes de commande, ou grâce à des
outils de CI automatisés comme [link:https://travis-ci.org/ Travis].
</p>

<h2>La version courte</h2>

<p>
Si vous êtes à l'aise avec node et npm,
<code>
$ npm install three --save-dev
</code>
et ajoutez
<code>
const THREE = require('three');
</code>
à votre test.
</p>

<h2>Créer un projet testable de zéro</h2>
<p>
Si vous n'êtes pas familier avec ces outils, vous trouverez ici un guide rapide (pour linux, le processus d'installation
sera légèrement différent de celui pour Windows, mais les commandes NPM sont identiques).
</p>

<h3>Setup basique</h3>
<div>
<ol>
<li>
Installez [link:https://www.npmjs.org/ npm] et nodejs. La méthode la plus rapide ressemble généralement à
<code>
$ sudo apt-get install -y npm nodejs-legacy
# fix any problems with SSL in the default registry URL
$ npm config set registry http://registry.npmjs.org/
</code>
</li>

<li>
Créez un nouveau répertoire de projet
<code>
$ mkdir test-example; cd test-example
</code>
</li>

<li>
Demandez à npm de créer un nouveau fichier de projet pour vous:
<code>
$ npm init
</code>
et acceptez tous les paramètres par défaut en appuyant sur Entrée à chaque prompt.
Cela créera package.json.
</li><br />

<li>
Essayez la fonctionnalité de test avec
<code>
$ npm test
</code>
Cela va échouer, comme prévu.
Si vous jetez un coup d'oeil à votre package.json, la définition du test de script sera
<code>
"test": "echo \"Error: no test specified\" && exit 1"
</code>
</li>

</ol>
</div>

<h2>Ajouter mocha</h2>
<div>
Nous allons utiliser [link:https://mochajs.org/ mocha].

<ol>
<li>
Installez mocha avec
<code>
$ npm install mocha --save-dev
</code>
Remarquez que node_modules/ est créé et que vos dépendances y apparaissent.
Notez également que votre package.json a été mis à jour: la propriété devDependencies
est ajoutée et mis à jour par l'utilisation de --save-dev.
</li><br />

<li>
Modifiez votre package.json pour qu'il utilise mocha pour effectuer les tests. Lorsqu'un test est invoqué, nous voulons simplement lancer
mocha et spécifier un verbose reporter. Par défaut cela lancera le contenu de test/
(ne pas avoir de répertoire test/ peut causer une npm ERR!, créez le en utilisant mkdir test)
<code>
"test": "mocha --reporter list"
</code>
</li>

<li>
Relancez les tests avec
<code>
$ npm test
</code>

Cela doit maintenant réussir, signalant 0 passages (1ms)
ou similaire.
</li>

</ol>
</div>

<h2>Ajouter three.js</h2>
<div>
<ol>
<li>
Ajoutons notre dépendance de three.js avec
<code>
$ npm install three --save-dev
</code>
<ul>
<li>
Si vous avez besoin d'une version de three différente, utilisez
<code>
$ npm show three versions
</code>
pour voir
ce qui est disponible. Pour indiquer à npm la bonne, utilisez
<code>
$ npm install three@0.84.0 --save
</code>
(0.84.0 dans cet exemple). --save qui en fait une dépendance de ce projet, au lieu
d'une dépendance dev. Voir la documentation [link:https://docs.npmjs.com/cli/v8/configuring-npm/package-json ici] pour plus d'informations.
</li>
</ul>
</li>

<li>
Mocha cherche des tests dans test/, exécutons donc la commande
<code>
$ mkdir test
</code>
</li>

<li>
Finalement, nous avons besoin d'un test JS à lancer. Ajoutons un test simple qui va vérifier que
l'objet three.js est disponible et fonctionnel. Créez test/verify-three.js contenant:
<code>
const THREE = require('three');
const assert = require('assert');

describe('The THREE object', function() {
it('should have a defined BasicShadowMap constant', function() {
assert.notEqual('undefined', THREE.BasicShadowMap);
}),

it('should be able to construct a Vector3 with default of x=0', function() {
const vec3 = new THREE.Vector3();
assert.equal(0, vec3.x);
})
})
</code>
</li>

<li>
Finalement testons à nouveau avec $ npm test. Cela doit lancer le test ci-dessous et réussir,
affichant quelque chose du genre:
<code>
The THREE object should have a defined BasicShadowMap constant: 0ms
The THREE object should be able to construct a Vector3 with default of x=0: 0ms
2 passing (8ms)
</code>
</li>
</ol>
</div>

<h2>Ajoutez votre propre code</h2>
<div>
Vous devez faire trois choses:

<ol>
<li>
Écrivez un test pour un comportement attendu de votre code, et placez-le sous test/.
[link:https://github.com/air/encounter/blob/master/test/Physics-test.js Ici] vous trouverez un exemple issu d'un vrai projet.
</li>

<li>
Exportez votre code de manière à ce que nodejs puisse le voir et l'utiliser quand la conjoncture le requiert.
Voir [link:https://github.com/air/encounter/blob/master/js/Physics.js ici].
</li>

<li>
Puis il faut require votre code dans le fichier de test, de la même manière que nous avons require('three') dans l'exemple au-dessus.
</li>
</ol>

<p>
Les items 2 et 3 varient selon la façon dont vous organisez votre code. Dans l'exemple de Physics.js
montré plus-haut, la partie concernant l'export est à la toute fin. Nous assignons un objet à module.exports:
</p>
<code>
//=============================================================================
// make available in nodejs
//=============================================================================
if (typeof exports !== 'undefined')
{
module.exports = Physics;
}
</code>
</div>

<h2>Gérer les dépendances</h2>
<div>
<p>
Si vous utlisez déjà quelque chose d'astucieux comme require.js ou browserify, sautez cette partie.
</p>
<p>
Généralement un projet three.js s'exécute dans le navigateur. Le module de chargement est par conséquent réalisé par
le navigateur qui exécute un ensemble de scripts. Vos fichiers individuels n'ont pas à gérer les
dépendances. Dans un contexte nodejs, il n'y a pas d'index.html reliant tout
ensemble, vous devez donc être explicites.
</p>
<p>
Si vous exportez un module qui dépend d'autres fichiers, vous devrez dire à node de les charger.
Voici une approche:
</p>
<ol>
<li>
Au début de votre module, vérifiez si vous êtes dans un environnement nodejs.
</li>
<li>
Si c'est le cas, déclarez explicitement vos dépendances.
</li>
<li>
Si ce n'est pas le cas, vous êtes probablement dans un navigateur vous n'avez donc rien d'autre à faire.
</li>
</ol>
Code d'exemple issu de Physics.js:
<code>
//=============================================================================
// setup for server-side testing
//=============================================================================
if (typeof require === 'function') // test for nodejs environment
{
const THREE = require('three');
const MY3 = require('./MY3.js');
}
</code>
</div>

</body>
</html>
Loading