1. Cube
Bien que le nom de cette forme soit en cubegeométrie, c'est en fait un cuboïde, c'est-à-dire que la longueur, la largeur et la hauteur peuvent être définies sur différentes valeurs. Son constructeur est:
THREE.CubeGeometry(width,height,depth,widthSegments,heightSegments, depthSegments)
Largeur: longueur en direction x
hauteur: longueur dans la direction y
profondeur: longueur dans la direction z
widthsegments: nombre de segments dans la direction x (valeur facultative, valeur par défaut 1)
HightEgments: nombre de segments dans la direction y (comme ci-dessus)
DepthSegments: nombre de segments dans la direction z (comme ci-dessus)
Sans solution:
var matériel = new Three.MeshBasicMaterial ({couleur: 0xffff00, wireframe: true}); drawCube (scène, matériau); fonction DrawCube (scène, matériau) {var cube = new Three.Mesh (new Three.cubeGeometry (1, 2, 3), matériau); scene.add (cube);}La position par défaut d'un objet est l'origine et pour un cube, la position de son centre géométrique à l'origine.
Segmentation:
var cube = new Three.Mesh (new Three.Cubegeométrie (1, 2, 3, 2, 2, 3), matériel);
Pourquoi y a-t-il tant de lignes maléfiques? Problème de version. Version R73:
Notez que cette segmentation segmente six faces , plutôt que des voxels du cube, donc il n'est pas segmenté au milieu du cube, et seuls six côtés sont segmentés.
2. Plan
Le plan ici (planeométrie) est en fait un rectangle, pas un plan de taille infinie au sens mathématique. Son constructeur est:
THREE.PlaneGeometry(width, height, widthSegments, heightSegments)
Largeur: longueur en direction x
hauteur: longueur dans la direction y
widthsegments: nombre de segments dans la direction x (valeur facultative, valeur par défaut 1)
HightEgments: nombre de segments dans la direction y (comme ci-dessus)
Nouveau trois.planégéométrie (2, 4); Le plan créé est dans le plan où se trouvent l'axe X et l'axe y, et l'effet est le suivant:
3. Sphère
Le constructeur de la sphère (sphèreométrie) est:
Trois.Spheregeométrie (rayon, segmentswidth, segmentsheight, phistart, philngle, thetastart, thetalngth) // radius: radius // segmentswidth: nombre de segments on longitude // segmentssheight: nombre de segments sur latitude // phistart: rayon à la longueur // philngoth début de latitude // thetalngle: rayon au début de la latitude
3.1 Nombre de segments de latitude et de longitude
Tout d'abord, comprenons les segmentswidth et segmentsheight. Utilisez var sphère = nouveau trois.spheregeométrie (3, 8, 6) pour créer une sphère avec un rayon de 3, la longitude divisée en 8 parties et la latitude divisées en 6 parties, comme indiqué sur la figure ci-dessous.
Les segments sont équivalents à la longitude qui est coupé en plusieurs pétales, tandis que le segment est équivalent à la latitude qui est coupée en plusieurs couches.
L'effet de New Three.Spheregeométrie (3, 5, 4):
L'effet de New Three.Spheregeométrie (3, 8, 6):
L'effet de New Three.Spheregeométrie (3, 18, 12):
Dans la mise en œuvre de la couche sous-jacente du graphique, il n'y a pas de concept de courbes et les courbes sont toutes composées de multiples approximations de polyligne. Pour les sphères, lorsque ces deux valeurs sont grandes, le polyèdre formé peut être approximativement considéré comme des sphères.
3,2 arc de longitude
new THREE.SphereGeometry(3, 8, 6, Math.PI / 6, Math.PI / 3) signifie que la longitude de départ est math.pi / 6 et que la durée de longitude est math.pi / 3.
Les effets sont les suivants:
Notez que le segmentaire des segments signifie ici que la longitude est divisée en 8 blocs dans la zone où math.pi / 6 traverse Math.pi / 3, au lieu de la longitude de toute la sphère divisée en 8 blocs avant de juger la pièce dans cette gamme de longitude.
3.3 Latitude Radian
Il en va de même pour les radians de latitude. new THREE.SphereGeometry(3, 8, 6, 0, Math.PI * 2, Math.PI / 6, Math.PI / 3) signifie que la latitude s'étend de math.pi / 6 sur math.pi / 3.
Les effets sont les suivants:
L'effet de new THREE.SphereGeometry(3, 8, 6, Math.PI / 2, Math.PI, Math.PI / 6, Math.PI / 2) :
4. Code source
<! Doctype html> <html> <éadf> <meta charset = "utf-8"> <itle> 3.js test 4 </ title> </ head> <body onload = "init ()"> <canvas id = "MainCanvas"> </ Canvas> <script type = "text / javascript"> function init () {var renderer = new Three.WebglRenderer ({canvas: document.getElementById ('MainCanvas')}); renderer.setClearColor (0x0000000); var scene = new Three.Scene (); // caméra var caméra = new Three.othographicaMamera (-5, 5, 3,75, -3,75, 0,1, 100); caméra.position.set (25, 25, 25); caméra.lookat (new Three.Vector3 (0, 0, 0)); scene.add (caméra); // matériau var matériel = new Three.MeshBasicMaterial ({couleur: 0xffff00, wireframe: true}); DrawCube (scène, matériel); // cube // Drawplan (scène, matériel); // plan // drawsphere (scène, matériau); // sphère // renderer rendu.render (scène, caméra); } fonction DrawCube (scène, matériau) {var cube = new Three.Mesh (new Three.CubegeoMétrie (1, 2, 3, 2, 2, 3), matériau); scene.add (cube); } fonction Drawplan (scène, matériau) {var plan = new Three.Mesh (new Three.planegeometry (2, 4), matériau); scene.add (plan); } fonction drawsphere (scène, matériau) {var sphère = new Three.Mesh (new Three.Spheregeométrie (3, 18, 12), matériel); // var sphère = new Three.Mesh (new Three.Spheregeométrie (3, 8, 6, math.pi / 6, math.pi / 3), matériau); // var sphère = new Three.Mesh (new. 8, 6, 0, math.pi * 2, math.pi / 6, math.pi / 3), matériel); // var sphère = new Three.Mesh (new Three.spheregeométrie (3, 8, 6, math.pi / 2, math.pi, math.pi / 6, math.pi / 2), matériel); scene.add (sphère); } </ script> </html>Ce qui précède est le contenu entier des formes géométriques apprises par trois.js. L'éditeur mettra à jour des articles sur trois.js l'un après l'autre. Veuillez continuer à faire attention à wulin.com.