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) => {
- 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>
|