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.
161 lines
7.1 KiB
161 lines
7.1 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>[name]</h1>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
Vous pouvez installer three.js avec [link:https://www.npmjs.com/ npm] et d'autres outils de build modernes, ou commencer rapidement avec just un hébergement static ou un CDN. Pour la plupart des utilisateurs, installer depuis npm est le meilleur choix.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
Peu importe votre choix, soyez cohérents et importez tous vos fichiers avec la même version de la librairie. Mélanger des fichiers de différentes sources peut causer une duplication de certaines parties de code, ou même casser l'application d'une manière imprédictible.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
Toutes les méthodes d'installation de three.js dépendent des Modules ES (voir [link:https://eloquentjavascript.net/10_modules.html#h_hF2FmOVxw7 Eloquent JavaScript: ECMAScript Modules]), ce qui vous permet d'inclure uniquement les parties requises de la librairie dans le projet final.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<h2>Installer depuis npm</h2>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
Pour installer le module npm [link:https://www.npmjs.com/package/three three], ouvrez une fenêtre de terminal dans le dossier de votre projet et lancez la commande suivante:
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<code>
|
||
|
|
npm install three
|
||
|
|
</code>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
Le package sera téléchargé et installé. Puis vous pouvez l'importer dans votre projet:
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<code>
|
||
|
|
// Option 1: Import the entire three.js core library.
|
||
|
|
import * as THREE from 'three';
|
||
|
|
|
||
|
|
const scene = new THREE.Scene();
|
||
|
|
|
||
|
|
|
||
|
|
// Option 2: Import just the parts you need.
|
||
|
|
import { Scene } from 'three';
|
||
|
|
|
||
|
|
const scene = new Scene();
|
||
|
|
</code>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
En l'installant depuis npm, vous utiliserez quasiment toujours une sorte de [link:https://eloquentjavascript.net/10_modules.html#h_zWTXAU93DC bundling tool] pour combiner tous les packages dont votre projet a besoin en un seul fichier JavaScript. N'importe quel bundler JavaScript modern peut être utilisé avec three.js, le choix le plus populaire est [link:https://webpack.js.org/ webpack].
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
Toutes les fonctionnalités ne sont pas directement accédées depuis le module <em>three</em> (également appelé "bare import"). D'autres parties populaires de la librairie — comme les contrôles, les loaders, et les effets de post-processing — doivent être importés depuis le sous-dossier [link:https://github.com/mrdoob/three.js/tree/dev/examples/jsm examples/jsm]. Pour en apprendre plus, consulter <em>Examples</em> ci-dessous.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
Apprenez-en plus à propos des modules npm depuis [link:https://eloquentjavascript.net/20_node.html#h_J6hW/SmL/a Eloquent JavaScript: Installation avec npm].
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<h2>Installer depuis un CDN ou un hébergement statique</h2>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
La librairie three.js peut être utilisée sans aucun build system, soit en uploadant les fichiers sur votre propre server web ou en utilisant un CDN existant. Parce que la librairie repose sur les modules ES, n'importe quel script qui y fait référence doit utiliser le <em>type="module"</em> comme montré ci-dessous.
|
||
|
|
Il est également requis de définir une Import Map qui effectue la résolution du bare module specifier `three`.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<code>
|
||
|
|
<script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>
|
||
|
|
|
||
|
|
<script type="importmap">
|
||
|
|
{
|
||
|
|
"imports": {
|
||
|
|
"three": "https://unpkg.com/three@<version>/build/three.module.js"
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<script type="module">
|
||
|
|
|
||
|
|
import * as THREE from 'three';
|
||
|
|
|
||
|
|
const scene = new THREE.Scene();
|
||
|
|
|
||
|
|
</script>
|
||
|
|
</code>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
Étant donné que les Import maps ne sont pas encore supportées par tous les navigateurs, il est nécessaire d'ajouter le polyfill *es-module-shims.js*.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<h2>Addons</h2>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
Le noyau de three.js est concentré sur les composants les plus importans d'un moteur 3D. Plusieurs autres composants utiles - comme les contrôles, les loaders, et les effets de post-processing - font partie du dossier [link:https://github.com/mrdoob/three.js/tree/dev/examples/jsm examples/jsm]. Ils sont désignés comme "exemples", parce que, en plus de pouvoir les utiliser directement tel qu'ils sont, ils sont aussi supposés être remixés et customisés. Ces composants sont toujours synchronisés avec le noyau de la librarie, là où des packages tiers similaires sur npm sont maintenus par différentes personnes et peuvent ne pas être à jour.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
Les addons n'ont pas besoin d'être <em>installés</em> séparément, mais doivent être <em>importés</em> séparément. Si three.js a été installé avec npm, vous pouvez charger le composant [page:OrbitControls] avec:
|
||
|
|
</p>
|
||
|
|
|
||
|
|
|
||
|
|
<code>
|
||
|
|
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
|
||
|
|
|
||
|
|
const controls = new OrbitControls( camera, renderer.domElement );
|
||
|
|
</code>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
Si three.js a été installé depuis un CDN, utilisez le même CDN pour installer d'autres composants:
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<code>
|
||
|
|
<script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>
|
||
|
|
|
||
|
|
<script type="importmap">
|
||
|
|
{
|
||
|
|
"imports": {
|
||
|
|
"three": "https://unpkg.com/three@<version>/build/three.module.js",
|
||
|
|
"three/addons/": "https://unpkg.com/three@<version>/examples/jsm/"
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<script type="module">
|
||
|
|
|
||
|
|
import * as THREE from 'three';
|
||
|
|
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
|
||
|
|
|
||
|
|
const controls = new OrbitControls( camera, renderer.domElement );
|
||
|
|
|
||
|
|
</script>
|
||
|
|
</code>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
Il est important que tous les fichiers utilisent la même version. N'importez pas différents addons de différentes versions, ou n'utilisez pas d'addons d'une version de three.js différente de celle de la librarie elle-même.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<h2>Compatibilité</h2>
|
||
|
|
|
||
|
|
<h3>Imports CommonJS</h3>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
Alors que la plupart des bundlers JavaScript modernes supportent les modules ES par défaut, cela peut ne pas être le cas de certains build tools plus anciens. Dans ce cas, vous pouvez probablement configurer le bundler pour qu'il comprenne les modules ES: [link:http://browserify.org/ Browserify] a just besoin du plugin [link:https://github.com/babel/babelify babelify], par exemple.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<h3>Node.js</h3>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
Parce que three.js est construit pour le web, il dépend de navigateurs et d'APIs DOM qui n'existent pas toujours dans Node.js. Certains de ces problèmes peuvent être résolus en utilisant des morceaux de code comme [link:https://github.com/stackgl/headless-gl headless-gl], ou en remplaçant des composents comme [page:TextureLoader] avec des alternatives customisées. D'autres APIs DOM peuvent être profondément entrelacées avec le code qui les utilises, et il sera compliqué de le modifier. Nous soutenons les pull requests simples et maintenables pour améliorer le support de Node.js, mais recommendons d'ouvrir une issue pour parler de vos améliorations avant.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
Faites attention à bien ajouter `{ "type": "module" }` à votre `package.json` pour autoriser les modules ES6 dans votre projet Node.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|