Les didacticiels de documents officiels Three.js donnent beaucoup de Geomerty pour construire différents types de polygones 3D, tels que cube BoxGeometry, cylindre CylinderGeometry, sphère SphereGeometry et d'autres classes de géométrie Three.js sont basées sur la classe de base BufferGeometry emballage secondaire. La géométrie encapsule les données de sommet telles que la position du sommet, le vecteur normal du sommet, la couleur de la couleur du sommet, la coordonnée de texture du sommet uv, l'index d'index de sommet et d'autres données de sommet dans WebGL natif. Plus d'informations sur les sommets de géométrie peuvent être apprises via des documents officiels ou la vidéo de la station B pour pratique.
Mais si vous entrez en contact avec le concept de sommets pour la première fois et que vous n'avez aucune base WebGL native, il est recommandé d'étudier le didacticiel WebGL natif, afin de mieux comprendre le concept de sommets géométriques. Cette analyse constitue l'un des éléments importants de l'objet modèle : Géométrie. Cet article présente les principales propriétés de la géométrie en trois parties.
- Propriétés géométriques : propriétés de base et propriétés d'animation
attributs de base
Vertices (sommets) : l'attribut de base, qui représente la position des sommets de la géométrie, et est utilisé lors de la construction de surfaces et du calcul des normales, etc.
Couleurs : calculs de couleur pour la coloration
Faces : une face composée de différents sommets, y compris des données telles que l'indice de sommet, la normale de la face, la normale du sommet de la face, etc., généralement une face triangulaire (comprenant des indices à trois points)
Méthode de géométrie : transformation de base, fusion de maillage et de sommets, normale point-surface, calcul de boîte englobante/sphère
BufferGeometry 与 DirectGeometry(Todo)
propriétés d'animation
L'animation peut être implémentée de deux manières dans Three :
Animation Morph : l'état de chaque image est déterminé par le tableau de sommets spécifié, et la valeur interpolée du tableau de position de sommet spécifié est appliquée dans l'animation (couramment utilisée)
Animation de la peau des os : la position des sommets du maillage dans l'état de chaque image est déterminée par les différents os spécifiés et leurs poids
- Autres propriétés de la géométrie
Attribut de position des sommets des sommets (Geometry personnalise une géométrie)
Lisez le code source des classes de géométrie three.js telles que cube BoxGeometry, sphere SphereGeometry et cylinder CylinderGeometry sous le document Three Js, et constatez que le code source de ces géométries sont des algorithmes associés pour générer des sommets de divers types de géométrie.
Les coordonnées xyz de la position d'un sommet peuvent être représentées par un vecteur tridimensionnel Vector3 de Three.js et une paire de géométrie Three.js. L'attribut .vertices de Geometry représente une collection de coordonnées de position de sommet.
var geo = new THREE.Geometry();
//位置坐标
var point = new THREE.Vector3(18, 20, 4);couleurs attribut de couleur de sommet
La couleur du sommet est définie via l'attribut color de l'objet géométrique Three.js Geometry, et la valeur de couleur peut être définie via l'objet Color. Les données de couleur d'un sommet sont représentées par un objet Color, qui est ensuite utilisé comme élément du tableau de valeurs d'attribut geometry.colors. Bien sûr, pour l'attribut de couleur de sommet du modèle de point Points et de la géométrie de ligne du modèle de ligne, les données de sommet en couleurs fonctionneront. S'il s'agit d'un modèle de maillage Mesh, la couleur doit être définie par l'objet de face triangulaire Face3.
const color = new THREE.Color(1, 1, 1);
const material = new THREE.MeshBasicMaterial({color: 0xffff00})- La catégorie principale de Géométrie
Géométrie du tampon cubique (BoxGeometry)
BoxGeometry est la classe de géométrie originale des quadrilatères, qui utilise généralement les paramètres de largeur, de hauteur et de profondeur fournis par le constructeur pour créer des cubes ou des trapèzes.
Exemple de code :
代码示例
const geometry = new THREE.BoxGeometry( 1, 1, 1 );
const material = new THREE.MeshBasicMaterial( {color: 0x00ff00} );
const cube = new THREE.Mesh( geometry, material );
scene.add( cube );Géométrie de tampon circulaire (CircleGeometry)
Une CircleGeometry est une forme simple de géométrie euclidienne construite à partir du nombre de segments triangulaires autour d'un point central, prolongés par un rayon donné. Il peut également être utilisé pour créer des polygones réguliers dont le nombre de segments dépend du nombre de côtés du polygone régulier.
const geometry = new THREE.CircleGeometry( 5, 32 );
const material = new THREE.MeshBasicMaterial( { color: 0xffff00 } );
const circle = new THREE.Mesh( geometry, material );
scene.add( circle );Géométrie du tampon de cône (ConeGeometry)
Une classe pour générer une géométrie conique.
const geometry = new THREE.CircleGeometry( 5, 32 );
const material = new THREE.MeshBasicMaterial( { color: 0xffff00 } );
const circle = new THREE.Mesh( geometry, material );
scene.add( circle );Exécuter des captures d'écran de la fonction
4. Résumé
Ce qui précède sont les principales méthodes de construction de certains polygones 3D intégrés à Three js. Pour plus de détails, veuillez vous référer au manuel du document sur le site officiel ( https://threejs.org/docs/?q=geo#api/zh/geometries /CircleGeometry ). Il y aura des explications détaillées et des méthodes pour démarrer avec différents objets, et en même temps, d'autres objets et attributs de trois js devraient être habilement utilisés pour construire des couleurs colorées et des effets spéciaux sympas. Par exemple, j'ai utilisé de manière flexible la méthode de la boucle for et de la fonction aléatoire pour construire une variété de triangles, comme celui illustré dans la figure ci-dessous, ce qui semble très intéressant. Bien sûr, je viens juste de commencer à apprendre les connaissances en SIG 3D front-end, et il y a encore de nombreuses lacunes dans de nombreux aspects, et j'espère que vous n'hésiterez pas à m'éclairer ! !
Les principaux liens vers les blogueurs référencés dans cet article sont :
http://www.yanhuangxueyuan.com/doc/Three.js/Geometry.html
https://yrq110.me/post/front-end/deep-in-threejs-core-objects-ii-geometry/
