gitadmin
/
three.js
-ын хуулбар https://github.com/mrdoob/three.js.git


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368
							<!DOCTYPE html><html lang="fr"><head>
    <meta charset="utf-8">
    <title>Primitives</title>
    <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:site" content="@threejs">
    <meta name="twitter:title" content="Three.js – Primitives">
    <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.ico" media="(prefers-color-scheme: light)">

    <link rel="stylesheet" href="../resources/lesson.css">
    <link rel="stylesheet" href="../resources/lang.css">
<script type="importmap">
{
  "imports": {
    "three": "../../build/three.module.js"
  }
}
</script>
  </head>
  <body>
    <div class="container">
      <div class="lesson-title">
        <h1>Primitives</h1>
      </div>
      <div class="lesson">
        <div class="lesson-main">
          <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>.
Si vous ne l'avez pas encore lu, vous voudriez peut-être commencer par là.</p>
<p>Three.js a un grand nombre de primitives. Les primitives
sont généralement des formes 3D qui sont générées à l'exécution
avec un tas de paramètres.</p>
<p>Il est courant d'utiliser des primitives des objets comme des sphères
pour un globe ou un tas de boîtes pour dessiner un graphique en 3D.
Il est particulièrement courant d'utiliser des primitives  pour faire
des expériences et se lancer dans la 3D. Pour la majorité des
applications 3D, il est courant de demander à un artiste de faire des modèles 3D
dans un programme de modélisation 3D comme <a href="https://blender.org">Blender</a>,
<a href="https://www.autodesk.com/products/maya/">Maya</a> ou <a href="https://www.maxon.net/en-us/products/cinema-4d/">Cinema 4D</a>.
Plus tard dans cette série,
nous aborderons la conception et le chargement de données provenant de
plusieurs programme de modélisation 3D. Pour l'instant, passons
en revue certaines primitives disponibles.</p>
<p>La plupart des primitives ci-dessous ont des valeurs par défaut
pour certain ou tous leurs paramètres. Vous pouvez donc les
utiliser en fonction de vos besoins.</p>
<div id="Diagram-BoxGeometry" data-primitive="BoxGeometry">Une Boîte</div>
<div id="Diagram-CircleGeometry" data-primitive="CircleGeometry">Un Cercle plat</div>
<div id="Diagram-ConeGeometry" data-primitive="ConeGeometry">Un Cône</div>
<div id="Diagram-CylinderGeometry" data-primitive="CylinderGeometry">Un Cylindre</div>
<div id="Diagram-DodecahedronGeometry" data-primitive="DodecahedronGeometry">Un Dodécaèdre (12 côtés)</div>
<div id="Diagram-ExtrudeGeometry" data-primitive="ExtrudeGeometry">Une forme 2D extrudée avec un biseautage optionnel. Ici, nous extrudons une forme de cœur. Notez qu'il s'agit du principe de fonctionnement pour les <a href="/docs/#api/en/geometries/TextGeometry"><code class="notranslate" translate="no">TextGeometry</code></a> et les <a href="/docs/#api/en/geometries/TextGeometry"><code class="notranslate" translate="no">TextGeometry</code></a>.</div>
<div id="Diagram-IcosahedronGeometry" data-primitive="IcosahedronGeometry">Un Icosaèdre (20 côtés)</div>
<div id="Diagram-LatheGeometry" data-primitive="LatheGeometry">Une forme généré par la rotation d'une ligne pour, par exemple, dessiner une lampe, une quille, une bougie, un bougeoir, un verre à vin, etc. Vous fournissez une silhouette en deux dimensions comme une série de points et vous indiquez ensuite à Three.js combien de subdivisions sont nécessaires en faisant tourner la silhouette autour d'un axe.</div>
<div id="Diagram-OctahedronGeometry" data-primitive="OctahedronGeometry">Un Octaèdre (8 côtés)</div>
<div id="Diagram-ParametricGeometry" data-primitive="ParametricGeometry">Une surface générée en fournissant à la fonction un point 2D d'une grille et retourne le point 3D correspondant.</div>
<div id="Diagram-PlaneGeometry" data-primitive="PlaneGeometry">Un plan 2D</div>
<div id="Diagram-PolyhedronGeometry" data-primitive="PolyhedronGeometry">Prend un ensemble de triangles centrés autour d'un point et les projettes sur une sphère</div>
<div id="Diagram-RingGeometry" data-primitive="RingGeometry">Un disque 2D avec un trou au centre</div>
<div id="Diagram-ShapeGeometry" data-primitive="ShapeGeometry">Un tracé 2D qui se triangule</div>
<div id="Diagram-SphereGeometry" data-primitive="SphereGeometry">une sphère</div>
<div id="Diagram-TetrahedronGeometry" data-primitive="TetrahedronGeometry">Un tétraèdre (4 côtés)</div>
<div id="Diagram-TextGeometry" data-primitive="TextGeometry">Texte 3D généré à partir d'une police 3D et d'une chaîne de caractères</div>
<div id="Diagram-TorusGeometry" data-primitive="TorusGeometry">Un tore (donut)</div>
<div id="Diagram-TorusKnotGeometry" data-primitive="TorusKnotGeometry">Un nœud torique</div>
<div id="Diagram-TubeGeometry" data-primitive="TubeGeometry">Extrusion contrôlée d'un cercle le long d'un tracé</div>
<div id="Diagram-EdgesGeometry" data-primitive="EdgesGeometry">Un objet d'aide qui prend une autre
géométrie en entrée et génère des arêtes que si l'angle entre les faces est supérieur à un certain
seuil. Par exemple, si vous regardez en haut de la boîte, elle montre une ligne passant par chaque
face et montrant chaque triangle qui forme la boîte. Si vous utilisez une
<a href="/docs/#api/en/geometries/EdgesGeometry"><code class="notranslate" translate="no">EdgesGeometry</code></a> les lignes du milieu sont supprimées. Ajustez le "thresholdAngle"
ci-dessous et vous verrez les arêtes en dessous de ce seuil disparatre.</div>
<div id="Diagram-WireframeGeometry" data-primitive="WireframeGeometry">Génère une géométrie qui
contient un segment de droite (2 points) par arête dans la géométrie donnée. Sans cela, il vous
manquerait souvent des arêtes ou vous obtiendriez des arêtes supplémentaires puisque WebGL exige
généralement 2 points par segment de ligne. Par exemple, si vous n'aviez qu'un seul triangle, il
n'y aurait que 3 points. Si vous essayez de le dessiner en utilisant un matériau avec
<code class="notranslate" translate="no">wireframe: true</code> vous n'obtiendrez qu'une seule ligne. Si vous passez cette géométrie
triangulaire à un <a href="/docs/#api/en/geometries/WireframeGeometry"><code class="notranslate" translate="no">WireframeGeometry</code></a> vous obtenez une nouvelle géométrie qui comporte
3 segments de lignes utilisant 6 points.</div>

<p>Nous reviendrons sur la création de géométrie personnalisée dans
<a href="custom-buffergeometry.html">un autre article</a>. Pour l'instant,
faisons un exemple en créant chaque type de primitive. Nous
commencerons par les <a href="responsive.html">exemples vus dans l'article précédent</a>.</p>
<p>Mais tout d'abord, définissons un couleur de fond :</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">const scene = new THREE.Scene();
+scene.background = new THREE.Color(0xAAAAAA);
</pre>
<p>Cela indique à three.js d'utiliser un fond gris clair.</p>
<p>La caméra doit changer de position pour que nous puissions voir tous les objets.</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">-const fov = 75;
+const fov = 40; // champ de vue (field of view)
const aspect = 2;
const near = 0.1; // distance minimum
-const far = 5;
+const far = 1000; // distance maximum
const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
-camera.position.z = 2;
+camera.position.z = 120;
</pre>
<p>Ajoutons une fonction, <code class="notranslate" translate="no">addObject</code>, qui prend une position x, y et un <a href="/docs/#api/en/core/Object3D"><code class="notranslate" translate="no">Object3D</code></a>
et ajoute l'objet à la scène.</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">const objects = [];
const spread = 15;

function addObject (x, y, obj) {
  obj.position.x = x * spread;
  obj.position.y = y * spread;

  scene.add(obj);
  objects.push(obj);
}
</pre>
<p>Faisons aussi une fonction pour créer un matériau coloré aléatoire.
Nous utiliserons une fonction de <a href="/docs/#api/en/math/Color"><code class="notranslate" translate="no">Color</code></a> qui vous permet de définir
une couleur en fonction de la teinte, de la saturation et de la luminosité.</p>
<p>La <code class="notranslate" translate="no">hue</code> (teinte) va de 0 à 1 autour de la roue des couleurs avec
le rouge à 0, le vert à 0,33 et le bleu à 0,66. La <code class="notranslate" translate="no">saturation</code>
va de 0 à 1, 0 n'ayant pas de couleur et 1 étant saturé. La <code class="notranslate" translate="no">luminance</code>
(luminosité) va de 0 à 1, 0 étant le noir, 1 le blanc et 0,5 la
quantité maximale de la couleur. En d'autres termes, lorsque la
<code class="notranslate" translate="no">luminance</code> va de 0,0 à 0,5, la couleur passe du noir à <code class="notranslate" translate="no">hue</code> (la teinte).
De 0,5 à 1,0 la couleur passe de <code class="notranslate" translate="no">hue</code> au blanc.</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">function createMaterial () {
  const material = new THREE.MeshPhongMaterial({
    side: THREE.DoubleSide,
  });

  const hue = Math.random(); // teinte
  const saturation = 1;
  const luminance = .5; // luminosité
  material.color.setHSL(hue, saturation, luminance);

  return material;
}
</pre>
<p>Nous avons également passé <code class="notranslate" translate="no">side: THREE.DoubleSide</code> au matériau.
Cela indique à three de dessiner les deux côtés des triangles
qui constituent une forme. Pour un solide comme une sphère
ou un cube, il n'y a généralement pas de raison de dessiner les
côtés arrières des triangles car ils sont tous tournés ver l'intérieur
de la forme. Dans notre cas, cependant, nous dessinons des objets
comme la <a href="/docs/#api/en/geometries/PlaneGeometry"><code class="notranslate" translate="no">PlaneGeometry</code></a> ou la <a href="/docs/#api/en/geometries/ShapeGeometry"><code class="notranslate" translate="no">ShapeGeometry</code></a>
qui sont bidimensionnnels et n'ont donc pas d'intérieur.
Sans le paramètre <code class="notranslate" translate="no">side: THREE.DoubleSide</code> ils disparaîtraient
quand on regarderait leur dos.</p>
<p>Notons qu'il est plus rapide de dessiner quand on ne met <strong>pas</strong>
<code class="notranslate" translate="no">side: THREE.DoubleSide</code>, donc l'idéal serait de ne le mettre que sur
les matériaux qui en ont vraiment besoin, mais pour cet exemple, nous
dessinons peu d'objets, donc il n'y a pas de raisons de s'en inquiéter.</p>
<p>Faisons une fonction, <code class="notranslate" translate="no">addSolidGeometry</code>, qui
reçoit une géométrie et crée un matériau coloré
aléatoire via <code class="notranslate" translate="no">createMaterial</code> et l'ajoute à la
scène via <code class="notranslate" translate="no">addObject</code>.</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">function addSolidGeometry(x, y, geometry) {
  const mesh = new THREE.Mesh(geometry, createMaterial());
  addObject(x, y, mesh);
}
</pre>
<p>Nous pouvons maintenant l'utiliser pour la majorité des primitives que nous créons.
Par exemple, la création d'une boîte :</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">{
  const width = 8; // largeur
  const height = 8; // hauteur
  const depth = 8; // profondeur
  addSolidGeometry(-2, -2, new THREE.BoxGeometry(width, height, depth));
}
</pre>
<p>Si vous regardez dans le code ci-dessous, vous verrez une section similaire pour chaque type de géométrie.</p>
<p>Voici le résultat :</p>
<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/primitives.html"></iframe></div>
  <a class="threejs_center" href="/manual/examples/primitives.html" target="_blank">Cliquer ici pour ouvrir dans une fenêtre séparée</a>
</div>

<p></p>
<p>Il y a quelques exceptions notables au modèle ci-dessus.
La plus grande est probablement le <a href="/docs/#api/en/geometries/TextGeometry"><code class="notranslate" translate="no">TextGeometry</code></a>. Il doit charger
des données de police en 3D avant de pouvoir générer un maillage pour le texte.
Ces données se chargent de manière asynchrone, nous devons donc attendre
qu'elles soient chargées avant d'essayer de créer la géométrie. En "promettant"
le chargement des polices, nous pouvons faciliter la tâche.
Une créons un <a href="/docs/#api/en/loaders/FontLoader"><code class="notranslate" translate="no">FontLoader</code></a> et une fonction <code class="notranslate" translate="no">loadFont</code> qui retourne
une promesse, qui une fois résolue, nous donnera la police. Nous créons
une fonction <code class="notranslate" translate="no">async</code> appelée <code class="notranslate" translate="no">doit</code> (fais le) et chargeons la police en utilisant <code class="notranslate" translate="no">await</code> (attends).
Et enfin, nous créons la géométrie et appelons <code class="notranslate" translate="no">addObject</code> pour l'ajouter à la scène.</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">{
  const loader = new FontLoader();
  // promisify font loading
  function loadFont(url) {
    return new Promise((resolve, reject) =&gt; {
      loader.load(url, resolve, undefined, reject);
    });
  }

  async function doit() {
    const font = await loadFont('../resources/threejs/fonts/helvetiker_regular.typeface.json');  /* threejs.org: url */
    const geometry = new TextGeometry('three.js', {
      font: font,
      size: 3.0,
      depth: .2,
      curveSegments: 12,
      bevelEnabled: true,
      bevelThickness: 0.15,
      bevelSize: .3,
      bevelSegments: 5,
    });
    const mesh = new THREE.Mesh(geometry, createMaterial());
    geometry.computeBoundingBox();
    geometry.boundingBox.getCenter(mesh.position).multiplyScalar(-1);

    const parent = new THREE.Object3D();
    parent.add(mesh);

    addObject(-1, -1, parent);
  }
  doit();
}
</pre>
<p>Il y a une autre différence. Nous voulons faire tourner le texte autour de son
centre, mais par défaut three.js crée le texte de tel sorte que son centre de rotation
se trouve sur le bord gauche. Pour contourner ce problème, nous pouvons demander à
three.js de calculer une boite englobant la géométrie.
Nous pouvons alors appeler la méthode <code class="notranslate" translate="no">getCenter</code> de cette boite
et lui passer la position du maillage de notre objet. La méthode
<code class="notranslate" translate="no">getCenter</code> copie le centre de la boite dans la position.
Elle renvoie également l'objet position afin que nous puissions appeler
<code class="notranslate" translate="no">multiplyScalar(-1)</code> pour positionner l'objet entier de tel sorte que son
centre de rotation soit positioné au centre de l'objet.</p>
<p>Si nous appelons juste <code class="notranslate" translate="no">addSolidGeometry</code> comme dans les
exemples précédents, il s'établirait une position
qui ne serait pas correcte. Donc, dans ce cas, nous créons un <a href="/docs/#api/en/core/Object3D"><code class="notranslate" translate="no">Object3D</code></a>
qui est un nœud standard pour les scènes three.js. <a href="/docs/#api/en/objects/Mesh"><code class="notranslate" translate="no">Mesh</code></a>
hérite également de <a href="/docs/#api/en/core/Object3D"><code class="notranslate" translate="no">Object3D</code></a> (confère l'article
<a href="scenegraph.html">comment un graphe de scène fonctionne</a>).
Pour l'instant, il suffit de savoir que,
comme les nœuds DOM, les enfants sont placés de façon relative par rapport à leur parent.
En créant un <a href="/docs/#api/en/core/Object3D"><code class="notranslate" translate="no">Object3D</code></a> et en faisant de notre maillage (mesh) un
enfant de celui-ci nous pouvons positionner l'<a href="/docs/#api/en/core/Object3D"><code class="notranslate" translate="no">Object3D</code></a> où nous
voulons tout en conservant le décalage central que nous avons
fixé précédemment.</p>
<p>Si nous ne faisions pas cela, le texte serait alors décentré !</p>
<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/primitives-text.html"></iframe></div>
  <a class="threejs_center" href="/manual/examples/primitives-text.html" target="_blank">Cliquer ici pour ouvrir dans une fenêtre séparée</a>
</div>

<p></p>
<p>Notons que celui de gauche ne tourne pas autour de son centre
alors que celui de droite le fait.</p>
<p>Les autres exceptions sont les exemples de 2 lignes pour la <a href="/docs/#api/en/geometries/EdgesGeometry"><code class="notranslate" translate="no">EdgesGeometry</code></a>
et la <a href="/docs/#api/en/geometries/WireframeGeometry"><code class="notranslate" translate="no">WireframeGeometry</code></a>. Au lieu d'appeler <code class="notranslate" translate="no">addSolidGeometry</code> ils appellent
<code class="notranslate" translate="no">addLineGeometry</code> dont le code ressemble à :</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">function addLineGeometry(x, y, geometry) {
  const material = new THREE.LineBasicMaterial({color: 0x000000});
  const mesh = new THREE.LineSegments(geometry, material);
  addObject(x, y, mesh);
}
</pre>
<p>Cette fonction crée un <a href="/docs/#api/en/materials/LineBasicMaterial"><code class="notranslate" translate="no">LineBasicMaterial</code></a> noir et crée ensuite un objet <a href="/docs/#api/en/objects/LineSegments"><code class="notranslate" translate="no">LineSegments</code></a>
qui est enveloppé par le <a href="/docs/#api/en/objects/Mesh"><code class="notranslate" translate="no">Mesh</code></a> qui permet à three de savoir que vous
affichez des segments de droite (2 points par segment).</p>
<p>Chacune des primitives a plusieurs paramètres que vous pouvez passer à la création
et il est préférable que vous <a href="https://threejs.org/docs/">regardez la documentation</a>
de tous ces paramètres par vous même plutôt que de la répéter dans ce document.
Vous pouvez également cliquer sur les liens ci-dessus à côté de chaque
forme pour accéder directement à la documentation correspondante.</p>
<p>Il y a une paire de classe qui ne correspond pas vraiment aux modèles ci-dessus. Il s'agit des
classes <a href="/docs/#api/en/materials/PointsMaterial"><code class="notranslate" translate="no">PointsMaterial</code></a> et  <a href="/docs/#api/en/objects/Points"><code class="notranslate" translate="no">Points</code></a>. Les <a href="/docs/#api/en/objects/Points"><code class="notranslate" translate="no">Points</code></a> sont comme les <a href="/docs/#api/en/objects/LineSegments"><code class="notranslate" translate="no">LineSegments</code></a> ci-dessus en
ce sens qu'ils prennent une <code class="notranslate" translate="no">Geometry</code> ou une <a href="/docs/#api/en/core/BufferGeometry"><code class="notranslate" translate="no">BufferGeometry</code></a> mais dessinent des points à chaque
sommet au lieu de lignes.
Pour l'utiliser, vous devez également lui passer un <a href="/docs/#api/en/materials/PointsMaterial"><code class="notranslate" translate="no">PointsMaterial</code></a> qui
prend une taille (<a href="/docs/#api/en/materials/PointsMaterial#size"><code class="notranslate" translate="no">size</code></a>) pour la grosseur des points.</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">const radius = 7; // rayon
const widthSegments = 12;
const heightSegments = 8;
const geometry = new THREE.SphereGeometry(radius, widthSegments, heightSegments);
const material = new THREE.PointsMaterial({
    color: 'red',
    size: 0.2, // en unités du monde
});
const points = new THREE.Points(geometry, material);
scene.add(points);
</pre>
<div class="spread">
<div data-diagram="Points"></div>
</div>

<p>Vous pouvez désactiver l'option <a href="/docs/#api/en/materials/PointsMaterial#sizeAttenuation"><code class="notranslate" translate="no">sizeAttenuation</code></a> en la réglant
sur "false" si vous souhaitez que les points soient de la même taille quelle que soit leur
distance par rapport à la caméra.</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">const material = new THREE.PointsMaterial({
    color: 'red',
+    sizeAttenuation: false,
+    size: 3, // en pixels
-    size: 0.2, // en unités du monde
});
...
</pre>
<div class="spread">
<div data-diagram="PointsUniformSize"></div>
</div>

<p>Une autre chose qu'il est important de souligner : c'est que presque toutes les formes ont des
réglages différents concernant leur subdivisions. Un bon exemple pourrait être les
géométries des sphères prennant en paramètres le nombre de divisions à faire autour et de
haut en bas. Par exemple :</p>
<div class="spread">
<div data-diagram="SphereGeometryLow"></div>
<div data-diagram="SphereGeometryMedium"></div>
<div data-diagram="SphereGeometryHigh"></div>
</div>

<p>La première sphère a un tour de 5 segments et 3 de haut, soit 15 segments ou 30 triangles.
La deuxième sphère a 24 segments sur 10. cela fait 240 segments ou 480 triangles. Le dernier a
50 par 50, soir 2500 segments ou 5000 triangles.</p>
<p>C'est à vous de décider du nombre de subdivisions dont vous avez besoin. Il peut sembler que vous
ayez besoin d'un grand nombre de segments, mais si vous enlevez les lignes et les ombres plates,
nous obtenons ceci :</p>
<div class="spread">
<div data-diagram="SphereGeometryLowSmooth"></div>
<div data-diagram="SphereGeometryMediumSmooth"></div>
<div data-diagram="SphereGeometryHighSmooth"></div>
</div>

<p>Il est moins perceptible que celle de droite avec 5000 triangles est meilleure que celle avec
seulement 480 triangles. Si vous ne dessinez que quelques sphères, comme par exemple, un seul
globe pour une carte de la terre, alors une sphère de 10 000 triangles n'est pas un mauvais choix.
Si, par contre, vous essayez de dessiner 1000 sphères alors 1000 sphères multipliées par 10000
triangles représentent chacune 10 millions de triangles. Pour que l'animation soit fluide,
il faut que le navigateur dessine à 60 images par seconde pour que vous demandiez au navigateur
de dessiner 600 millions de triangles par seconde. Cela fait beaucoup trop de calcul.</p>
<p>Parfois, il est facile de choisir. Par exemple, vous pouvez aussi choisir
de subdiviser un plan.</p>
<div class="spread">
<div data-diagram="PlaneGeometryLow"></div>
<div data-diagram="PlaneGeometryHigh"></div>
</div>

<p>Le plan à gauche est composé de 2 triangles. Le plan de droite est composé de 200 triangles.
Contrairement à la sphère, il n'y a pas vraiment de compromis sur la qualité pour la plupart des
cas d'utilisation d'un plan. Vous ne subdiviserez probablement un plan que si vous vous attendez
à vouloir le modifier ou le déformer d'une manière ou d'une autre. Idem pour une boîte.</p>
<p>Choisissez donc ce qui convient le mieux à votre situation. Moins vous choisirez de subdivisions,
plus les choses auront des chances de se dérouler sans heurts et moins il vous faudra de mémoire.
Vous devrez décider vous-même du compromis qui convient le mieux à cas d'utilisation.</p>
<p>Si aucune des formes ci-dessus ne correspond à votre cas d'utilisation, vous pouvez
charger la géométrie par exemple à partir d'un <a href="load-obj.html">fichier .obj</a>
ou d'un <a href="load-gltf.html">fichier .gltf</a>.
Vous pouvez également créer votre <a href="custom-buffergeometry.html">BufferGeometry</a>.</p>
<p>Voyons maintenant l'article traitant sur <a href="scenegraph.html">comment fonctionne un graphe de scène three.js et comment l'utiliser</a>.</p>
<p><link rel="stylesheet" href="../resources/threejs-primitives.css"></p>
<script type="module" src="../resources/threejs-primitives.js"></script>

        </div>
      </div>
    </div>

  <script defer src="../resources/prettify.js"></script>
  <script defer src="../resources/lesson.js"></script>


</body></html>