Los tutoriales del documento oficial de Three.js brindan mucho Geomerty para construir diferentes tipos de polígonos 3D, como el cubo BoxGeometry, el cilindro CylinderGeometry, la esfera SphereGeometry y otras clases de geometría de Three.js se basan en el paquete secundario de clase base BufferGeometry. La geometría encapsula datos de vértice, como la posición del vértice, el vector normal normal del vértice, el color del color del vértice, la coordenada de textura del vértice uv, el índice de índice de vértice y otros datos de vértice en WebGL nativo. Se puede obtener más información sobre los vértices de geometría a través de documentos oficiales o videos de la estación B para práctica.
Pero si entra en contacto con el concepto de vértices por primera vez y no tiene una base de WebGL nativo, se recomienda estudiar el tutorial de WebGL nativo, para que pueda comprender mejor el concepto de vértices geométricos. Este análisis constituye uno de los elementos importantes del objeto modelo: la Geometría. Este artículo presenta las principales propiedades de la Geometría en tres partes.
- Propiedades de geometría: propiedades básicas y propiedades de animación.
atributos básicos
Vértices (vértices): el atributo central, que representa la posición del vértice de la geometría, y se utiliza al construir superficies y calcular normales, etc.
Colores: Cálculos de color para colorear
Caras: una cara compuesta de diferentes vértices, incluidos datos como índice de vértice, cara normal, vértice de cara normal, etc., generalmente una cara triangular (incluidos los índices de tres puntos)
Método de geometría: transformación básica, fusión de mallas y vértices, normal punto-superficie, cálculo de esfera/cuadro delimitador
BufferGeometry como DirectGeometry(Todo)
propiedades de animación
La animación se puede implementar de dos maneras en Three:
Animación Morph: el estado de cada cuadro está determinado por la matriz de vértices especificada, y el valor interpolado de la matriz de posición de vértice especificada se aplica en la animación (comúnmente utilizado)
Animación de piel de huesos: la posición de los vértices de la malla en el estado de cada cuadro está determinada por los diferentes huesos especificados y sus pesos
- Otras propiedades de la Geometría
Atributo de posición de vértice de vértices (la geometría personaliza una geometría)
Lea el código fuente de las clases de geometría three.js, como cube BoxGeometry,sphere SphereGeometry y cilindro CylinderGeometry en el documento Three Js, y descubra que el código fuente de estas geometrías son algoritmos relacionados para generar vértices de varios tipos de geometría.
Las coordenadas xyz de la posición de un vértice se pueden representar mediante un vector tridimensional Vector3 de Three.js y un par de geometría Three.js. El atributo .vertices de Geometry representa una colección de coordenadas de posición de posición de vértice.
var geo = new THREE.Geometry();
//位置坐标
var point = new THREE.Vector3(18, 20, 4);atributo de color de vértice de colores
El color del vértice se establece a través del atributo color del objeto de geometría Three.js Geometry, y el valor del color se puede definir a través del objeto Color. Los datos de color de un vértice están representados por un objeto Color, que luego se usa como un elemento de la matriz de valor de atributo de geometría.colores. Por supuesto, para el atributo de color de vértice del modelo de punto Puntos y la geometría de línea del modelo de línea, los datos de vértice en colores funcionarán.Si se trata de una malla de modelo de malla, el color debe definirse por el objeto de cara triangular Face3.
const color = new THREE.Color(1, 1, 1);
const material = new THREE.MeshBasicMaterial({color: 0xffff00})- La categoría principal de Geometría.
Geometría de búfer cúbica (BoxGeometry)
BoxGeometry es la clase de geometría original de los cuadriláteros, que generalmente usan los parámetros de ancho, alto y profundidad proporcionados por el constructor para crear cubos o trapecios.
Ejemplo de código:
代码示例
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 );Geometría de zona de influencia circular (CircleGeometry)
Una CircleGeometry es una forma simple de geometría euclidiana construida a partir del número de segmentos triangulares alrededor de un punto central, extendido por un radio dado. También se puede utilizar para crear polígonos regulares cuyo número de segmentos depende del número de lados del polígono regular.
const geometry = new THREE.CircleGeometry( 5, 32 );
const material = new THREE.MeshBasicMaterial( { color: 0xffff00 } );
const circle = new THREE.Mesh( geometry, material );
scene.add( circle );Geometría del búfer de cono (ConeGeometry)
Una clase para generar geometría cónica.
const geometry = new THREE.CircleGeometry( 5, 32 );
const material = new THREE.MeshBasicMaterial( { color: 0xffff00 } );
const circle = new THREE.Mesh( geometry, material );
scene.add( circle );Ejecutar capturas de pantalla de funciones
4. Resumen
Los anteriores son los principales métodos de construcción de algunos polígonos 3D integrados en Three js. Para obtener más información, consulte el manual del documento en el sitio web oficial ( https://threejs.org/docs/?q=geo#api/zh/geometries /CircleGeometry ). Habrá explicaciones detalladas y métodos para comenzar con diferentes objetos y, al mismo tiempo, otros objetos y atributos de tres js deben usarse hábilmente para construir colores coloridos y efectos especiales geniales. Por ejemplo, utilicé de manera flexible el método de bucle for y la función aleatoria para construir una variedad de triángulos, como el que se muestra en la figura a continuación, que parece muy interesante. Por supuesto, acabo de comenzar a aprender el conocimiento de gis 3D de front-end, y todavía hay muchas deficiencias en muchos aspectos, ¡y espero que no duden en iluminarme! !
Los principales enlaces a bloggers a los que se hace referencia en este artículo son:
http://www.yanhuangxueyuan.com/doc/Three.js/Geometry.html
https://yrq110.me/post/front-end/deep-in-threejs-core-objects-ii-geometry/
