|
@@ -1,10 +1,10 @@
|
|
|
<!DOCTYPE html><html lang="fr"><head>
|
|
<!DOCTYPE html><html lang="fr"><head>
|
|
|
<meta charset="utf-8">
|
|
<meta charset="utf-8">
|
|
|
- <title>Graphique de scène de </title>
|
|
|
|
|
|
|
+ <title>Graphe de scène</title>
|
|
|
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
|
|
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
|
|
|
<meta name="twitter:card" content="summary_large_image">
|
|
<meta name="twitter:card" content="summary_large_image">
|
|
|
<meta name="twitter:site" content="@threejs">
|
|
<meta name="twitter:site" content="@threejs">
|
|
|
- <meta name="twitter:title" content="Three.js – Graphique de scène de ">
|
|
|
|
|
|
|
+ <meta name="twitter:title" content="Three.js – Graphe de scène">
|
|
|
<meta property="og:image" content="https://threejs.org/files/share.png">
|
|
<meta property="og:image" content="https://threejs.org/files/share.png">
|
|
|
<link rel="shortcut icon" href="/files/favicon_white.ico" media="(prefers-color-scheme: dark)">
|
|
<link rel="shortcut icon" href="/files/favicon_white.ico" media="(prefers-color-scheme: dark)">
|
|
|
<link rel="shortcut icon" href="/files/favicon.ico" media="(prefers-color-scheme: light)">
|
|
<link rel="shortcut icon" href="/files/favicon.ico" media="(prefers-color-scheme: light)">
|
|
@@ -26,17 +26,17 @@
|
|
|
<body>
|
|
<body>
|
|
|
<div class="container">
|
|
<div class="container">
|
|
|
<div class="lesson-title">
|
|
<div class="lesson-title">
|
|
|
- <h1>Graphique de scène de </h1>
|
|
|
|
|
|
|
+ <h1>Graphe de de scène</h1>
|
|
|
</div>
|
|
</div>
|
|
|
<div class="lesson">
|
|
<div class="lesson">
|
|
|
<div class="lesson-main">
|
|
<div class="lesson-main">
|
|
|
<p>Cet article fait partie d'une série consacrée à Three.js.
|
|
<p>Cet article fait partie d'une série consacrée à Three.js.
|
|
|
Le premier article s'intitule <a href="fundamentals.html">Principes de base</a>.
|
|
Le premier article s'intitule <a href="fundamentals.html">Principes de base</a>.
|
|
|
Si vous ne l'avez pas encore lu, vous voudriez peut-être commencer par là.</p>
|
|
Si vous ne l'avez pas encore lu, vous voudriez peut-être commencer par là.</p>
|
|
|
-<p>Le coeurs de Three.js est sans aucun doute son graphique de scène. Un graphique de scène est une représentation arborescente des objets que l’on souhaite afficher, où chaque nœud représente un espace local.</p>
|
|
|
|
|
|
|
+<p>Le cœur de Three.js est sans aucun doute son graphe de scène. Un graphe de scène est une représentation arborescente des objets que l’on souhaite afficher, où chaque nœud représente un espace local.</p>
|
|
|
<p><img src="../resources/images/scenegraph-generic.svg" align="center"></p>
|
|
<p><img src="../resources/images/scenegraph-generic.svg" align="center"></p>
|
|
|
<p>C'est un peu abstrait, alors essayons de donner quelques exemples.</p>
|
|
<p>C'est un peu abstrait, alors essayons de donner quelques exemples.</p>
|
|
|
-<p>On pourrait prendre comme exemple le système solaire, le soleil, la terre, la lune.</p>
|
|
|
|
|
|
|
+<p>On pourrait prendre comme exemple le système solaire, le Soleil, la Terre et la Lune.</p>
|
|
|
<p><img src="../resources/images/scenegraph-solarsystem.svg" align="center"></p>
|
|
<p><img src="../resources/images/scenegraph-solarsystem.svg" align="center"></p>
|
|
|
<p>La Terre tourne autour du Soleil. La Lune tourne autour de la Terre. La Lune se déplace en cercle autour de la Terre. Du point de vue de la Lune, elle tourne dans "l'espace local" de la Terre. Même si son mouvement par rapport au Soleil est une courbe folle comme un spirographe du point de vue de la Lune, il n'a qu'à se préoccuper de tourner autour de l'espace local de la Terre.</p>
|
|
<p>La Terre tourne autour du Soleil. La Lune tourne autour de la Terre. La Lune se déplace en cercle autour de la Terre. Du point de vue de la Lune, elle tourne dans "l'espace local" de la Terre. Même si son mouvement par rapport au Soleil est une courbe folle comme un spirographe du point de vue de la Lune, il n'a qu'à se préoccuper de tourner autour de l'espace local de la Terre.</p>
|
|
|
<p></p><div class="threejs_diagram_container">
|
|
<p></p><div class="threejs_diagram_container">
|
|
@@ -44,8 +44,8 @@ Si vous ne l'avez pas encore lu, vous voudriez peut-être commencer par là.</p>
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<p></p>
|
|
<p></p>
|
|
|
-<p>Pour le voir autrement, vous qui vivez sur Terre n'avez pas à penser à la rotation de la Terre sur son axe ni à sa rotation autour du Soleil. Vous marchez ou conduisez ou nagez ou courez comme si la Terre ne bougeait pas ou ne tournait pas du tout. Vous marchez, conduisez, nagez, courez et vivez dans "l'espace local" de la Terre même si par rapport au soleil, vous tournez autour de la terre à environ 1 600 km/h et autour du soleil à environ 107000km/h. Votre position dans le système solaire est similaire à celle de la lune au-dessus, mais vous n'avez pas à vous en préoccuper. Vous vous souciez simplement de votre position par rapport à la terre dans son "espace local".</p>
|
|
|
|
|
-<p>Allons-y une étape à la fois. Imaginez que nous voulions faire un diagramme du soleil, de la terre et de la lune. Nous allons commencer par le soleil en créant simplement une sphère et en la mettant à l'origine. Remarque : Nous utilisons le soleil, la terre et la lune comme démonstration de l'utilisation d'une scène. Bien sûr, le vrai soleil, la terre et la lune utilisent la physique, mais pour nos besoins, nous allons faire semblant.</p>
|
|
|
|
|
|
|
+<p>Pour le voir autrement, vous qui vivez sur Terre, n'avez pas à penser à la rotation de la Terre sur son axe ni à sa rotation autour du Soleil. Vous marchez ou conduisez ou nagez ou courez comme si la Terre ne bougeait pas ou ne tournait pas du tout. Vous marchez, conduisez, nagez, courez et vivez dans "l'espace local" de la Terre, même si par rapport au Soleil, vous tournez autour de la Terre à environ 1 600 km/h et autour du Soleil à environ 107000 km/h. Votre position dans le système solaire est similaire à celle de la Lune au-dessus, mais vous n'avez pas à vous en préoccuper. Vous vous souciez de votre position par rapport à la Terre dans son "espace local".</p>
|
|
|
|
|
+<p>Mais allons-y une étape à la fois! Imaginez que nous voulions faire un diagramme du Soleil, de la Terre et de la Lune. Nous allons commencer par le Soleil en créant une simpme sphère et en la mettant à l'origine. Remarque : Nous utilisons le Soleil, la Terre et la Lune comme démonstration de l'utilisation d'une scène. Bien sûr, le vrai Soleil, la Terre et la Lune utilisent la physique, mais pour nos besoins, nous allons faire semblant.</p>
|
|
|
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">// un tableau d'objets dont la rotation à mettre à jour
|
|
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">// un tableau d'objets dont la rotation à mettre à jour
|
|
|
const objects = [];
|
|
const objects = [];
|
|
|
|
|
|
|
@@ -58,14 +58,14 @@ const sphereGeometry = new THREE.SphereGeometry(
|
|
|
|
|
|
|
|
const sunMaterial = new THREE.MeshPhongMaterial({emissive: 0xFFFF00});
|
|
const sunMaterial = new THREE.MeshPhongMaterial({emissive: 0xFFFF00});
|
|
|
const sunMesh = new THREE.Mesh(sphereGeometry, sunMaterial);
|
|
const sunMesh = new THREE.Mesh(sphereGeometry, sunMaterial);
|
|
|
-sunMesh.scale.set(5, 5, 5); // agrandir le soleil
|
|
|
|
|
|
|
+sunMesh.scale.set(5, 5, 5); // agrandir le Soleil
|
|
|
scene.add(sunMesh);
|
|
scene.add(sunMesh);
|
|
|
objects.push(sunMesh);
|
|
objects.push(sunMesh);
|
|
|
</pre>
|
|
</pre>
|
|
|
-<p>Nous utilisons une sphère à très faible polygone. Seulement 6 segments autour de son équateur. C'est ainsi qu'il est facile de voir la rotation.</p>
|
|
|
|
|
-<p>Nous allons réutiliser la même sphère pour tout, nous allons juste grossir la <code class="notranslate" translate="no">sunMesh</code> 5 fois.</p>
|
|
|
|
|
-<p>Nous avons également défini la propriété <code class="notranslate" translate="no">emissive</code> du matériau phong sur jaune. La propriété émissive d'un matériau phong est essentiellement la couleur qui sera dessinée sans que la lumière ne frappe la surface. La lumière est ajoutée à cette couleur.</p>
|
|
|
|
|
-<p>Mettons également une 'point light' au centre de la scène. Nous entrerons dans les détails plus tard, mais pour l'instant, la version simple est une lumière qui émane d'un seul point.</p>
|
|
|
|
|
|
|
+<p>Nous utilisons une sphère ayant un faible nombre de polygones (avec seulement 6 segments autour de son équateur) afin de faciliter la visualisation de sa rotation.</p>
|
|
|
|
|
+<p>Nous allons réutiliser la même sphère pour les autres astres : nous allons grossir la <code class="notranslate" translate="no">sunMesh</code> 5 fois.</p>
|
|
|
|
|
+<p>Nous avons également défini la propriété <code class="notranslate" translate="no">emissive</code> du matériau Phong sur jaune. La propriété émissive d'un matériau Phong est essentiellement la couleur qui sera dessinée sans que la lumière ne frappe la surface. La lumière est ajoutée à cette couleur.</p>
|
|
|
|
|
+<p>Mettons aussi une 'point light' au centre de la scène. Nous entrerons dans les détails plus tard, mais pour l'instant, la version simple est une lumière qui émane d'un seul point.</p>
|
|
|
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">{
|
|
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">{
|
|
|
const color = 0xFFFFFF;
|
|
const color = 0xFFFFFF;
|
|
|
const intensity = 3;
|
|
const intensity = 3;
|
|
@@ -73,7 +73,7 @@ objects.push(sunMesh);
|
|
|
scene.add(light);
|
|
scene.add(light);
|
|
|
}
|
|
}
|
|
|
</pre>
|
|
</pre>
|
|
|
-<p>Pour faciliter la visualisation, nous allons placer la caméra directement au-dessus de l'origine en regardant vers le bas. Le moyen le plus simple de le faire est d'utiliser la fonction <code class="notranslate" translate="no">lookAt</code>. Cette fonction oriente la caméra pour "regarder" vers la position que nous passons à <code class="notranslate" translate="no">lookAt</code>. Avant de faire cela, nous devons cependant indiquer à la caméra dans quelle direction le haut de la caméra est orienté ou plutôt dans quelle direction est "vers le haut" pour la caméra. Pour la plupart des situations, un Y positif est suffisant, mais puisque nous regardons vers le bas, nous devons dire à la caméra que Z positif est levé.</p>
|
|
|
|
|
|
|
+<p>Pour faciliter la visualisation, nous allons placer la caméra directement au-dessus de l'origine en regardant vers le bas. Le moyen le plus simple de le faire est d'utiliser la fonction <code class="notranslate" translate="no">lookAt</code>. Cette fonction oriente la caméra pour "regarder" vers la position que nous passons à <code class="notranslate" translate="no">lookAt</code>. Avant de faire cela, nous devons cependant indiquer à la caméra dans quelle direction "vers son haut" est orienté. Pour la plupart des situations, un Y positif est suffisant, mais puisque nous regardons vers le bas, nous devons dire à la caméra que Z positif est levé.</p>
|
|
|
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
|
|
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
|
|
|
camera.position.set(0, 50, 0);
|
|
camera.position.set(0, 50, 0);
|
|
|
camera.up.set(0, 0, 1);
|
|
camera.up.set(0, 0, 1);
|
|
@@ -91,23 +91,23 @@ camera.lookAt(0, 0, 0);
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<p></p>
|
|
<p></p>
|
|
|
-<p>Ajoutons maintenant la terre.</p>
|
|
|
|
|
|
|
+<p>Ajoutons maintenant la Terre.</p>
|
|
|
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">const earthMaterial = new THREE.MeshPhongMaterial({color: 0x2233FF, emissive: 0x112244});
|
|
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">const earthMaterial = new THREE.MeshPhongMaterial({color: 0x2233FF, emissive: 0x112244});
|
|
|
const earthMesh = new THREE.Mesh(sphereGeometry, earthMaterial);
|
|
const earthMesh = new THREE.Mesh(sphereGeometry, earthMaterial);
|
|
|
earthMesh.position.x = 10;
|
|
earthMesh.position.x = 10;
|
|
|
scene.add(earthMesh);
|
|
scene.add(earthMesh);
|
|
|
objects.push(earthMesh);
|
|
objects.push(earthMesh);
|
|
|
</pre>
|
|
</pre>
|
|
|
-<p>Nous fabriquons un matériau bleu mais nous lui donnons une petite quantité de bleu émissif pour qu'il apparaisse sur notre fond noir.</p>
|
|
|
|
|
-<p>Nous utilisons la même <code class="notranslate" translate="no">sphereGeometry</code> avec notre nouveau <code class="notranslate" translate="no">EarthMaterial</code> bleu pour faire une <code class="notranslate" translate="no">earthMesh</code>.
|
|
|
|
|
-Nous positionnons ces 10 unités à gauche du soleil et l'ajoutons à la scène. L'ajouter à notre tableau <code class="notranslate" translate="no">objects</code>, la met en mouvement également.</p>
|
|
|
|
|
|
|
+<p>Nous fabriquons un matériau bleu, mais nous lui donnons une petite quantité de bleu émissif pour qu'il apparaisse sur notre fond noir.</p>
|
|
|
|
|
+<p>Nous utilisons la même <code class="notranslate" translate="no">sphereGeometry</code> avec notre nouveau <code class="notranslate" translate="no">EarthMaterial</code> bleu pour faire une <code class="notranslate" translate="no">earthMesh</code>.
|
|
|
|
|
+Nous positionnons ces 10 unités à gauche du Soleil et l'ajoutons à la scène. L'ajouter à notre tableau <code class="notranslate" translate="no">objects</code>, la met en mouvement également.</p>
|
|
|
<p></p><div translate="no" class="threejs_example_container notranslate">
|
|
<p></p><div translate="no" class="threejs_example_container notranslate">
|
|
|
<div><iframe class="threejs_example notranslate" translate="no" style=" " src="/manual/examples/resources/editor.html?url=/manual/examples/scenegraph-sun-earth.html"></iframe></div>
|
|
<div><iframe class="threejs_example notranslate" translate="no" style=" " src="/manual/examples/resources/editor.html?url=/manual/examples/scenegraph-sun-earth.html"></iframe></div>
|
|
|
<a class="threejs_center" href="/manual/examples/scenegraph-sun-earth.html" target="_blank">Cliquer ici pour ouvrir dans une fenêtre séparée</a>
|
|
<a class="threejs_center" href="/manual/examples/scenegraph-sun-earth.html" target="_blank">Cliquer ici pour ouvrir dans une fenêtre séparée</a>
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<p></p>
|
|
<p></p>
|
|
|
-<p>Vous pouvez voir que le soleil et la terre tournent mais que la terre ne tourne pas autour du soleil. Faisons de la terre un enfant du soleil</p>
|
|
|
|
|
|
|
+<p>Vous pouvez voir que le Soleil et la Terre tournent, mais que la Terre ne tourne pas autour du Soleil. Faisons de la Terre un enfant du Soleil</p>
|
|
|
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">-scene.add(earthMesh);
|
|
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">-scene.add(earthMesh);
|
|
|
+sunMesh.add(earthMesh);
|
|
+sunMesh.add(earthMesh);
|
|
|
</pre>
|
|
</pre>
|
|
@@ -118,13 +118,13 @@ Nous positionnons ces 10 unités à gauche du soleil et l'ajoutons à la scène.
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<p></p>
|
|
<p></p>
|
|
|
-<p>Que s'est-il passé? Pourquoi la terre a-t-elle la même taille que le soleil et pourquoi est-elle si loin ? En fait, j'ai dû déplacer la caméra de 50 à 150 unités au-dessus pour voir la terre.</p>
|
|
|
|
|
-<p>Nous avons fait de <code class="notranslate" translate="no">earthMesh</code> un enfant du <code class="notranslate" translate="no">sunMesh</code>.
|
|
|
|
|
-La <code class="notranslate" translate="no">sunMesh</code> a son échelle définie sur 5x grâce à <code class="notranslate" translate="no">sunMesh.scale.set(5, 5, 5)</code>. Cela signifie que l'espace local sunMeshs est 5 fois plus grand.
|
|
|
|
|
-Tout ce qui est mis dans cet espace sera multiplié par 5. Cela signifie que la Terre est maintenant 5 fois plus grande et sa distance par rapport au soleil (<code class="notranslate" translate="no">earthMesh.position.x = 10</code>) est également 5 fois plus grande.</p>
|
|
|
|
|
-<p> Notre scène ressemble maintenant à celà</p>
|
|
|
|
|
|
|
+<p>Que s'est-il passé ? Pourquoi la Terre a-t-elle la même taille que le Soleil et pourquoi est-elle si loin ? En fait, j'ai dû déplacer la caméra de 50 à 150 unités au-dessus pour voir la Terre.</p>
|
|
|
|
|
+<p>Nous avons fait de <code class="notranslate" translate="no">earthMesh</code> un enfant du <code class="notranslate" translate="no">sunMesh</code>.
|
|
|
|
|
+La <code class="notranslate" translate="no">sunMesh</code> a son échelle définie sur 5x grâce à <code class="notranslate" translate="no">sunMesh.scale.set(5, 5, 5)</code>. Cela signifie que l'espace local sunMeshs est 5 fois plus grand.
|
|
|
|
|
+Tout ce qui est mis dans cet espace sera multiplié par 5. Cela signifie que la Terre est maintenant 5 fois plus grande et sa distance par rapport au Soleil (<code class="notranslate" translate="no">earthMesh.position.x = 10</code>) est également 5 fois plus grande.</p>
|
|
|
|
|
+<p> Notre scène ressemble maintenant à cela</p>
|
|
|
<p><img src="../resources/images/scenegraph-sun-earth.svg" align="center"></p>
|
|
<p><img src="../resources/images/scenegraph-sun-earth.svg" align="center"></p>
|
|
|
-<p>Pour résoudre ce problème, ajoutons un nœud vide. Nous lions le soleil et la terre à ce nœud.</p>
|
|
|
|
|
|
|
+<p>Pour résoudre ce problème, ajoutons un nœud vide. Nous lions le Soleil et la Terre à ce nœud.</p>
|
|
|
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">+const solarSystem = new THREE.Object3D();
|
|
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">+const solarSystem = new THREE.Object3D();
|
|
|
+scene.add(solarSystem);
|
|
+scene.add(solarSystem);
|
|
|
+objects.push(solarSystem);
|
|
+objects.push(solarSystem);
|
|
@@ -146,7 +146,7 @@ objects.push(earthMesh);
|
|
|
<p>Ici, nous avons fait un <a href="/docs/#api/en/core/Object3D"><code class="notranslate" translate="no">Object3D</code></a>. Comme une <a href="/docs/#api/en/objects/Mesh"><code class="notranslate" translate="no">Mesh</code></a>, c'est aussi un nœud, mais contrairement à une <a href="/docs/#api/en/objects/Mesh"><code class="notranslate" translate="no">Mesh</code></a>, il n'a ni matériau ni géométrie. Il ne représente qu'un espace local.</p>
|
|
<p>Ici, nous avons fait un <a href="/docs/#api/en/core/Object3D"><code class="notranslate" translate="no">Object3D</code></a>. Comme une <a href="/docs/#api/en/objects/Mesh"><code class="notranslate" translate="no">Mesh</code></a>, c'est aussi un nœud, mais contrairement à une <a href="/docs/#api/en/objects/Mesh"><code class="notranslate" translate="no">Mesh</code></a>, il n'a ni matériau ni géométrie. Il ne représente qu'un espace local.</p>
|
|
|
<p>Notre nouvelle scène ressemble à ceci :</p>
|
|
<p>Notre nouvelle scène ressemble à ceci :</p>
|
|
|
<p><img src="../resources/images/scenegraph-sun-earth-fixed.svg" align="center"></p>
|
|
<p><img src="../resources/images/scenegraph-sun-earth-fixed.svg" align="center"></p>
|
|
|
-<p>La <code class="notranslate" translate="no">sunMesh</code> et la <code class="notranslate" translate="no">earthMesh</code> sont tous les deux des enfants de <code class="notranslate" translate="no">solarSystem</code>. Les trois sont en train de tournés, et comme <code class="notranslate" translate="no">earthMesh</code> n'est pas un enfant de <code class="notranslate" translate="no">sunMesh</code>, elle n'est plus mise à l'échelle.</p>
|
|
|
|
|
|
|
+<p>La <code class="notranslate" translate="no">sunMesh</code> et la <code class="notranslate" translate="no">earthMesh</code> sont tous les deux des enfants de <code class="notranslate" translate="no">solarSystem</code>. Les trois sont en train de tourner, et comme <code class="notranslate" translate="no">earthMesh</code> n'est pas un enfant de <code class="notranslate" translate="no">sunMesh</code>, elle n'est plus mise à l'échelle.</p>
|
|
|
<p></p><div translate="no" class="threejs_example_container notranslate">
|
|
<p></p><div translate="no" class="threejs_example_container notranslate">
|
|
|
<div><iframe class="threejs_example notranslate" translate="no" style=" " src="/manual/examples/resources/editor.html?url=/manual/examples/scenegraph-sun-earth-orbit-fixed.html"></iframe></div>
|
|
<div><iframe class="threejs_example notranslate" translate="no" style=" " src="/manual/examples/resources/editor.html?url=/manual/examples/scenegraph-sun-earth-orbit-fixed.html"></iframe></div>
|
|
|
<a class="threejs_center" href="/manual/examples/scenegraph-sun-earth-orbit-fixed.html" target="_blank">Cliquer ici pour ouvrir dans une fenêtre séparée</a>
|
|
<a class="threejs_center" href="/manual/examples/scenegraph-sun-earth-orbit-fixed.html" target="_blank">Cliquer ici pour ouvrir dans une fenêtre séparée</a>
|
|
@@ -177,7 +177,7 @@ objects.push(earthMesh);
|
|
|
+moonOrbit.add(moonMesh);
|
|
+moonOrbit.add(moonMesh);
|
|
|
+objects.push(moonMesh);
|
|
+objects.push(moonMesh);
|
|
|
</pre>
|
|
</pre>
|
|
|
-<p>Ajoutons à nouveau d'autres noeuds à notre scène. D'abord, un <a href="/docs/#api/en/core/Object3D"><code class="notranslate" translate="no">Object3D</code></a> appelé <code class="notranslate" translate="no">earthOrbit</code>
|
|
|
|
|
|
|
+<p>Ajoutons à nouveau d'autres nœuds à notre scène. D'abord, un <a href="/docs/#api/en/core/Object3D"><code class="notranslate" translate="no">Object3D</code></a> appelé <code class="notranslate" translate="no">earthOrbit</code>
|
|
|
ensuite ajoutons-lui un <code class="notranslate" translate="no">earthMesh</code> et un <code class="notranslate" translate="no">moonOrbit</code>. Finalement, ajoutons un <code class="notranslate" translate="no">moonMesh</code>
|
|
ensuite ajoutons-lui un <code class="notranslate" translate="no">earthMesh</code> et un <code class="notranslate" translate="no">moonOrbit</code>. Finalement, ajoutons un <code class="notranslate" translate="no">moonMesh</code>
|
|
|
au <code class="notranslate" translate="no">moonOrbit</code>. Notre scène devrait ressembler à ceci :</p>
|
|
au <code class="notranslate" translate="no">moonOrbit</code>. Notre scène devrait ressembler à ceci :</p>
|
|
|
<p><img src="../resources/images/scenegraph-sun-earth-moon.svg" align="center"></p>
|
|
<p><img src="../resources/images/scenegraph-sun-earth-moon.svg" align="center"></p>
|
|
@@ -188,13 +188,13 @@ au <code class="notranslate" translate="no">moonOrbit</code>. Notre scène devra
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<p></p>
|
|
<p></p>
|
|
|
-<p>Vous pouvez voir que la lune suit le modèle de spirographe indiqué en haut de cet article, mais nous n'avons pas eu à le calculer manuellement. Nous venons de configurer notre graphe de scène pour le faire pour nous.</p>
|
|
|
|
|
|
|
+<p>Vous pouvez voir que la Lune suit le modèle de spirographe indiqué en haut de cet article, mais nous n'avons pas eu à le calculer manuellement. Nous venons de configurer notre graphe de scène pour le faire pour nous.</p>
|
|
|
<p>Il est souvent utile de dessiner quelque chose pour visualiser les nœuds dans le graphe de scène.
|
|
<p>Il est souvent utile de dessiner quelque chose pour visualiser les nœuds dans le graphe de scène.
|
|
|
Three.js dispose pour cela de Helpers.</p>
|
|
Three.js dispose pour cela de Helpers.</p>
|
|
|
-<p>L'un d'entre eux s'appelle <a href="/docs/#api/en/helpers/AxesHelper"><code class="notranslate" translate="no">AxesHelper</code></a>. Il dessine trois lignes représentant les axes
|
|
|
|
|
|
|
+<p>L'un d'entre eux s'appelle <a href="/docs/#api/en/helpers/AxesHelper"><code class="notranslate" translate="no">AxesHelper</code></a>. Il dessine trois lignes représentant les axes
|
|
|
<span style="color:red">X</span>,
|
|
<span style="color:red">X</span>,
|
|
|
<span style="color:green">Y</span>, et
|
|
<span style="color:green">Y</span>, et
|
|
|
-<span style="color:blue">Z</span>. Ajoutons-en un à chacun de nos noeuds. </p>
|
|
|
|
|
|
|
+<span style="color:blue">Z</span>. Ajoutons-en un à chacun de nos nœuds. </p>
|
|
|
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">// add an AxesHelper to each node
|
|
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">// add an AxesHelper to each node
|
|
|
objects.forEach((node) => {
|
|
objects.forEach((node) => {
|
|
|
const axes = new THREE.AxesHelper();
|
|
const axes = new THREE.AxesHelper();
|
|
@@ -214,7 +214,7 @@ Pour cela, nous définissons le <code class="notranslate" translate="no">depthTe
|
|
|
<p>Vous pouvez voir les axes
|
|
<p>Vous pouvez voir les axes
|
|
|
<span style="color:red">x (rouge)</span> et
|
|
<span style="color:red">x (rouge)</span> et
|
|
|
<span style="color:blue">z (bleu)</span>. Comme nous regardons vers le bas et que chacun de nos objets tourne autour de son axe y, nous ne voyons pas bien l'axe <span style="color:green">y (verte)</span>.</p>
|
|
<span style="color:blue">z (bleu)</span>. Comme nous regardons vers le bas et que chacun de nos objets tourne autour de son axe y, nous ne voyons pas bien l'axe <span style="color:green">y (verte)</span>.</p>
|
|
|
-<p>Il peut être difficile de voir certains d'entre eux car il y a 2 paires d'axes qui se chevauchent. Le <code class="notranslate" translate="no">sunMesh</code> et le <code class="notranslate" translate="no">solarSystem</code> sont tous les deux à la même position. De même, <code class="notranslate" translate="no">earthMesh</code> et <code class="notranslate" translate="no">earthOrbit</code> sont à la même position. Ajoutons quelques contrôles simples pour nous permettre de les activer/désactiver pour chaque nœud. Pendant que nous y sommes, ajoutons également un autre assistant appelé <a href="/docs/#api/en/helpers/GridHelper"><code class="notranslate" translate="no">GridHelper</code></a>. Il crée une grille 2D sur le plan X,Z. Par défaut, la grille est de 10x10 unités.</p>
|
|
|
|
|
|
|
+<p>Il peut être difficile de voir certains d'entre eux, car il y a 2 paires d'axes qui se chevauchent. Le <code class="notranslate" translate="no">sunMesh</code> et le <code class="notranslate" translate="no">solarSystem</code> sont tous les deux à la même position. De même, <code class="notranslate" translate="no">earthMesh</code> et <code class="notranslate" translate="no">earthOrbit</code> sont à la même position. Ajoutons quelques contrôles simples pour nous permettre de les activer/désactiver pour chaque nœud. Pendant que nous y sommes, ajoutons également un autre assistant appelé <a href="/docs/#api/en/helpers/GridHelper"><code class="notranslate" translate="no">GridHelper</code></a>. Il crée une grille 2D sur le plan X,Z. Par défaut, la grille est de 10x10 unités.</p>
|
|
|
<p>Nous allons également utiliser <a href="https://github.com/georgealways/lil-gui">lil-gui</a>, une librairie d'interface utilisateur très populaire pour les projets Three.js. lil-gui prend un objet et un nom de propriété sur cet objet et, en fonction du type de la propriété, crée automatiquement une interface utilisateur pour manipuler cette propriété.</p>
|
|
<p>Nous allons également utiliser <a href="https://github.com/georgealways/lil-gui">lil-gui</a>, une librairie d'interface utilisateur très populaire pour les projets Three.js. lil-gui prend un objet et un nom de propriété sur cet objet et, en fonction du type de la propriété, crée automatiquement une interface utilisateur pour manipuler cette propriété.</p>
|
|
|
<p>Nous voulons créer à la fois un <a href="/docs/#api/en/helpers/GridHelper"><code class="notranslate" translate="no">GridHelper</code></a> et un <a href="/docs/#api/en/helpers/AxesHelper"><code class="notranslate" translate="no">AxesHelper</code></a> pour chaque nœud. Nous avons besoin d'un label pour chaque nœud, nous allons donc nous débarrasser de l'ancienne boucle et faire appel à une fonction pour ajouter les helpers pour chaque nœud.</p>
|
|
<p>Nous voulons créer à la fois un <a href="/docs/#api/en/helpers/GridHelper"><code class="notranslate" translate="no">GridHelper</code></a> et un <a href="/docs/#api/en/helpers/AxesHelper"><code class="notranslate" translate="no">AxesHelper</code></a> pour chaque nœud. Nous avons besoin d'un label pour chaque nœud, nous allons donc nous débarrasser de l'ancienne boucle et faire appel à une fonction pour ajouter les helpers pour chaque nœud.</p>
|
|
|
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">-// add an AxesHelper to each node
|
|
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">-// add an AxesHelper to each node
|
|
@@ -237,11 +237,11 @@ Pour cela, nous définissons le <code class="notranslate" translate="no">depthTe
|
|
|
+makeAxisGrid(moonOrbit, 'moonOrbit');
|
|
+makeAxisGrid(moonOrbit, 'moonOrbit');
|
|
|
+makeAxisGrid(moonMesh, 'moonMesh');
|
|
+makeAxisGrid(moonMesh, 'moonMesh');
|
|
|
</pre>
|
|
</pre>
|
|
|
-<p><code class="notranslate" translate="no">makeAxisGrid</code> crée un <code class="notranslate" translate="no">AxisGridHelper</code> qui est une classe que nous allons créer pour rendre lil-gui heureux. Comme il est dit ci-dessus, lil-gui créera automatiquement une interface utilisateur qui manipule la propriété nommée d'un objet. Cela créera une interface utilisateur différente selon le type de propriété. Nous voulons qu'il crée une case à cocher, nous devons donc spécifier une propriété bool. Mais, nous voulons que les axes et la grille apparaissent/disparaissent en fonction d'une seule propriété, nous allons donc créer une classe qui a un getter et un setter pour une propriété. De cette façon, nous pouvons laisser lil-gui penser qu'il manipule une seule propriété, mais en interne, nous pouvons définir la propriété visible de <a href="/docs/#api/en/helpers/AxesHelper"><code class="notranslate" translate="no">AxesHelper</code></a> et <a href="/docs/#api/en/helpers/GridHelper"><code class="notranslate" translate="no">GridHelper</code></a> pour un nœud.</p>
|
|
|
|
|
-<pre class="prettyprint showlinemods notranslate lang-js" translate="no">// Activer/désactiver les axes et la grille lil-gui
|
|
|
|
|
-// nécessite une propriété qui renvoie un bool
|
|
|
|
|
-// pour décider de faire une case à cocher
|
|
|
|
|
-// afin que nous créions un setter et un getter pour `visible`
|
|
|
|
|
|
|
+<p><code class="notranslate" translate="no">makeAxisGrid</code> crée un <code class="notranslate" translate="no">AxisGridHelper</code> qui est une classe que nous allons créer pour rendre lil-gui heureux. Comme il est dit ci-dessus, lil-gui créera automatiquement une interface utilisateur qui manipule la propriété nommée d'un objet. Cela créera une interface utilisateur différente selon le type de propriété. Nous voulons qu'il crée une case à cocher, nous devons donc spécifier une propriété bool. Mais, nous voulons que les axes et la grille apparaissent/disparaissent en fonction d'une seule propriété, nous allons en conséquence créer une classe qui a un getter et un setter pour une propriété. De cette façon, nous pouvons laisser lil-gui penser qu'il manipule une seule propriété, mais en interne, nous pouvons définir la propriété visible de <a href="/docs/#api/en/helpers/AxesHelper"><code class="notranslate" translate="no">AxesHelper</code></a> et <a href="/docs/#api/en/helpers/GridHelper"><code class="notranslate" translate="no">GridHelper</code></a> pour un nœud.</p>
|
|
|
|
|
+<pre class="prettyprint showlinemods notranslate lang-js" translate="no">// Activer/désactiver les axes et la grille lil-gui
|
|
|
|
|
+// nécessite une propriété qui renvoie un bool
|
|
|
|
|
+// pour décider de faire une case à cocher
|
|
|
|
|
+// afin que nous créions un setter et un getter pour `visible`
|
|
|
// que nous pouvons dire à lil-gui de regarder.
|
|
// que nous pouvons dire à lil-gui de regarder.
|
|
|
class AxisGridHelper {
|
|
class AxisGridHelper {
|
|
|
constructor(node, units = 10) {
|
|
constructor(node, units = 10) {
|
|
@@ -276,22 +276,20 @@ class AxisGridHelper {
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<p></p>
|
|
<p></p>
|
|
|
-<p>Cliquez sur <code class="notranslate" translate="no">solarSystem</code> et vous verrez que la terre est exactement à 10 unités du centre, comme nous l'avons défini ci-dessus. Vous pouvez voir que la terre est dans l'espace local du <code class="notranslate" translate="no">solarSystem</code>. De même, si vous cliquez sur <code class="notranslate" translate="no">earthOrbit</code>, vous verrez que la lune est exactement à 2 unités du centre de <em>l'espace local</em> de <code class="notranslate" translate="no">earthOrbit</code>.</p>
|
|
|
|
|
-<p>Un autre exemple de scène. Une automobile dans un jeu simple pourrait avoir un graphique de scène comme celui-ci</p>
|
|
|
|
|
|
|
+<p>Cliquez sur <code class="notranslate" translate="no">solarSystem</code> et vous verrez que la Terre est exactement à 10 unités du centre, comme nous l'avons défini ci-dessus. Vous pouvez voir que la Terre est dans l'espace local du <code class="notranslate" translate="no">solarSystem</code>. De même, si vous cliquez sur <code class="notranslate" translate="no">earthOrbit</code>, vous verrez que la Lune est exactement à 2 unités du centre de <em>l'espace local</em> de <code class="notranslate" translate="no">earthOrbit</code>.</p>
|
|
|
|
|
+<p>Un autre exemple de scène. Une automobile dans un jeu simple pourrait avoir un graphe de scène comme celui-ci</p>
|
|
|
<p><img src="../resources/images/scenegraph-car.svg" align="center"></p>
|
|
<p><img src="../resources/images/scenegraph-car.svg" align="center"></p>
|
|
|
<p>Si vous déplacez la carrosserie de la voiture, toutes les roues bougeront avec elle. Si vous vouliez que le corps rebondisse séparément des roues, vous pouvez lier le corps et les roues à un nœud "cadre" qui représente le cadre de la voiture.</p>
|
|
<p>Si vous déplacez la carrosserie de la voiture, toutes les roues bougeront avec elle. Si vous vouliez que le corps rebondisse séparément des roues, vous pouvez lier le corps et les roues à un nœud "cadre" qui représente le cadre de la voiture.</p>
|
|
|
<p>Un autre exemple avec un humain dans un jeu vidéo.</p>
|
|
<p>Un autre exemple avec un humain dans un jeu vidéo.</p>
|
|
|
<p><img src="../resources/images/scenegraph-human.svg" align="center"></p>
|
|
<p><img src="../resources/images/scenegraph-human.svg" align="center"></p>
|
|
|
<p>Vous pouvez voir que le graphique de la scène devient assez complexe pour un humain. En fait, le graphe ci-dessus est simplifié. Par exemple, vous pouvez l'étendre pour couvrir chaque doigt (au moins 28 autres nœuds) et chaque orteil (encore 28 nœuds) plus ceux pour le visage et la mâchoire, les yeux et peut-être plus.</p>
|
|
<p>Vous pouvez voir que le graphique de la scène devient assez complexe pour un humain. En fait, le graphe ci-dessus est simplifié. Par exemple, vous pouvez l'étendre pour couvrir chaque doigt (au moins 28 autres nœuds) et chaque orteil (encore 28 nœuds) plus ceux pour le visage et la mâchoire, les yeux et peut-être plus.</p>
|
|
|
<p>Faisons un graphe semi-complexe. On va faire un char. Il aura 6 roues et une tourelle. Il pourra suivre un chemin. Il y aura une sphère qui se déplacera et le char ciblera la sphère.</p>
|
|
<p>Faisons un graphe semi-complexe. On va faire un char. Il aura 6 roues et une tourelle. Il pourra suivre un chemin. Il y aura une sphère qui se déplacera et le char ciblera la sphère.</p>
|
|
|
-<p>Let's make one semi-complex scene graph. We'll make a tank. The tank will have
|
|
|
|
|
-6 wheels and a turret. The tank will follow a path. There will be a sphere that
|
|
|
|
|
-moves around and the tank will target the sphere.</p>
|
|
|
|
|
|
|
+<p>Créons une scène un peu plus complexe : nous allons créer un char d'assaut (tank) avec ses six roues et sa tourelle. Le tank suivra un chemin prédéfini. Il y aura aussi une sphère qui tourne autour du tank et ce dernier orientera sa tourelle vers cette cible.</p>
|
|
|
<p>Voici le graphique de la scène. Les maillages sont colorés en vert, les <a href="/docs/#api/en/core/Object3D"><code class="notranslate" translate="no">Object3D</code></a> en bleu, les lumières en or et les caméras en violet. Une caméra n'a pas été ajoutée au graphique de la scène.</p>
|
|
<p>Voici le graphique de la scène. Les maillages sont colorés en vert, les <a href="/docs/#api/en/core/Object3D"><code class="notranslate" translate="no">Object3D</code></a> en bleu, les lumières en or et les caméras en violet. Une caméra n'a pas été ajoutée au graphique de la scène.</p>
|
|
|
<div class="threejs_center"><img src="../resources/images/scenegraph-tank.svg" style="width: 800px;"></div>
|
|
<div class="threejs_center"><img src="../resources/images/scenegraph-tank.svg" style="width: 800px;"></div>
|
|
|
|
|
|
|
|
<p>Regardez dans le code pour voir la configuration de tous ces nœuds.</p>
|
|
<p>Regardez dans le code pour voir la configuration de tous ces nœuds.</p>
|
|
|
-<p>Pour la cible, la chose que le char vise, il y a une <code class="notranslate" translate="no">targetOrbit</code> (Object3D) qui tourne juste de la même manière que la <code class="notranslate" translate="no">earthOrbit</code> ci-dessus. Une <code class="notranslate" translate="no">targetElevation</code> (Object3D) qui est un enfant de <code class="notranslate" translate="no">targetOrbit</code> fournit un décalage par rapport à <code class="notranslate" translate="no">targetOrbit</code> et une élévation de base. Un autre <a href="/docs/#api/en/core/Object3D"><code class="notranslate" translate="no">Object3D</code></a> appelé <code class="notranslate" translate="no">targetBob</code> qui monte et descend par rapport à la <code class="notranslate" translate="no">targetElevation</code>. Enfin, il y a le <code class="notranslate" translate="no">targetMesh</code> qui est juste un cube que nous faisons pivoter et changeons ses couleurs.</p>
|
|
|
|
|
|
|
+<p>Pour la cible, la sphère que le char vise, il y a une <code class="notranslate" translate="no">targetOrbit</code> (Object3D) qui tourne de la même manière que la <code class="notranslate" translate="no">earthOrbit</code> ci-dessus. Une <code class="notranslate" translate="no">targetElevation</code> (Object3D) qui est un enfant de <code class="notranslate" translate="no">targetOrbit</code> fournit un décalage par rapport à <code class="notranslate" translate="no">targetOrbit</code> et une élévation de base. Un autre <a href="/docs/#api/en/core/Object3D"><code class="notranslate" translate="no">Object3D</code></a> appelé <code class="notranslate" translate="no">targetBob</code> qui monte et descend par rapport à la <code class="notranslate" translate="no">targetElevation</code>. Enfin, il y a le <code class="notranslate" translate="no">targetMesh</code> qui est seulement un cube que nous faisons pivoter et changeons ses couleurs.</p>
|
|
|
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">// mettre en mouvement la cible
|
|
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">// mettre en mouvement la cible
|
|
|
targetOrbit.rotation.y = time * .27;
|
|
targetOrbit.rotation.y = time * .27;
|
|
|
targetBob.position.y = Math.sin(time * 2) * 4;
|
|
targetBob.position.y = Math.sin(time * 2) * 4;
|
|
@@ -306,7 +304,7 @@ const tankTarget = new THREE.Vector2();
|
|
|
|
|
|
|
|
...
|
|
...
|
|
|
|
|
|
|
|
-// mettre en mouvement le char
|
|
|
|
|
|
|
+// Mettre en mouvement le char
|
|
|
const tankTime = time * .05;
|
|
const tankTime = time * .05;
|
|
|
curve.getPointAt(tankTime % 1, tankPosition);
|
|
curve.getPointAt(tankTime % 1, tankPosition);
|
|
|
curve.getPointAt((tankTime + 0.01) % 1, tankTarget);
|
|
curve.getPointAt((tankTime + 0.01) % 1, tankTarget);
|
|
@@ -318,7 +316,7 @@ tank.lookAt(tankTarget.x, 0, tankTarget.y);
|
|
|
|
|
|
|
|
...
|
|
...
|
|
|
|
|
|
|
|
-// tourelle face à la cible
|
|
|
|
|
|
|
+// Tourelle face à la cible
|
|
|
targetMesh.getWorldPosition(targetPosition);
|
|
targetMesh.getWorldPosition(targetPosition);
|
|
|
turretPivot.lookAt(targetPosition);
|
|
turretPivot.lookAt(targetPosition);
|
|
|
</pre>
|
|
</pre>
|
|
@@ -349,7 +347,7 @@ targetCameraPivot.lookAt(targetPosition);
|
|
|
|
|
|
|
|
const infoElem = document.querySelector('#info');
|
|
const infoElem = document.querySelector('#info');
|
|
|
</pre>
|
|
</pre>
|
|
|
-<p>et nous parcourons chaque camera au moment du rendu</p>
|
|
|
|
|
|
|
+<p>et nous parcourons chaque caméra au moment du rendu</p>
|
|
|
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">const camera = cameras[time * .25 % cameras.length | 0];
|
|
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">const camera = cameras[time * .25 % cameras.length | 0];
|
|
|
infoElem.textContent = camera.desc;
|
|
infoElem.textContent = camera.desc;
|
|
|
</pre>
|
|
</pre>
|
|
@@ -359,18 +357,13 @@ infoElem.textContent = camera.desc;
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<p></p>
|
|
<p></p>
|
|
|
-<p>J'espère que cela donne une idée du fonctionnement des graphiques de scène et de la façon dont vous pouvez les utiliser.
|
|
|
|
|
-Faire des nœuds « Object3D » et leur attacher des choses est une étape importante pour utiliser
|
|
|
|
|
-un moteur 3D comme Three.js bien. Souvent, on pourrait penser que des mathématiques complexes soient nécessaires
|
|
|
|
|
-pour faire bouger quelque chose et faire pivoter comme vous le souhaitez. Par exemple sans graphique de scène
|
|
|
|
|
-calculer le mouvement de la lune, savoir où placer les roues de la voiture par rapport à son
|
|
|
|
|
-corps serait très compliqué, mais en utilisant un graphique de scène, cela devient beaucoup plus facile.</p>
|
|
|
|
|
-<p><a href="materials.html">Passons maintenant en revue les materials</a>.</p>
|
|
|
|
|
|
|
+<p>J'espère que cet article vous aura donné une bonne idée du fonctionnement des graphes de scène et de la façon dont vous devez les utiliser. Créer des nœuds « Object3D » et savoir leur attacher d'autres nœuds est une étape importante dans l'utilisant un moteur 3D tel que Three.js., car bien souvent, on pourrait penser que des mathématiques complexes sont nécessaires pour faire bouger quelque chose et faire pivoter comme vous le souhaitez (comme calculer le mouvement de la Lune, savoir où calculer la position des roues de la voiture par rapport à son corps). En utilisant un graphe de scène, et comme nous l'avons vu dans cet article, le travail en est grandement simplifié.</p>
|
|
|
|
|
+<p>Article suivant :<a href="materials.html">Passons maintenant en revue les materials</a>.</p>
|
|
|
|
|
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
<script src="/manual/resources/prettify.js"></script>
|
|
<script src="/manual/resources/prettify.js"></script>
|
|
|
<script src="/manual/resources/lesson.js"></script>
|
|
<script src="/manual/resources/lesson.js"></script>
|
|
|
|
|
|
Quentin Quadrat