Geometrías
¿Qué son las Geometrías?
En el mundo real, los objetos tienen forma porque están hechos de materia continua. En 3D, todo objeto es una ilusión creada al unir puntos en el espacio. Las Geometries (Geometrías) definen la estructura matemática, el esqueleto de tu objeto.
Ese esqueleto está compuesto de Vértices (los puntos en el espacio) y Caras (los triángulos que se forman al conectar tres vértices). Entre más vértices tenga una geometría, más suave y detallada será, pero también le costará más esfuerzo al ordenador calcularla.
Las Geometrías Primitivas
Al igual que HTML te da etiquetas predefinidas (div, p, h1), Three.js te regala formas básicas listas para usar, llamadas primitivas. Las más comunes son:
- BoxGeometry: Un cubo o prisma rectangular. Ideal para cajas, edificios o píxeles 3D.
- SphereGeometry: Una esfera. Perfecta para planetas, partículas o gotas.
- PlaneGeometry: Un plano 2D. Se usa muchísimo para simular suelos, paredes o para proyectar imágenes encima como tarjetas interactivas.
- TorusGeometry: Un donut gigante. Muy usado en motion design abstracto.
Segmentos: El coste de la curva
Cuando creas una SphereGeometry, debes indicarle su radio, pero también sus segmentos de ancho y alto. Una esfera con 8x8 segmentos se verá como un diamante rudo (low-poly). Una esfera con 64x64 se verá perfectamente redonda, pero requiere mucho procesamiento. El secreto de un buen desarrollo 3D es usar el menor número de segmentos posible para engañar al ojo.
Consejo profesional
Cuando crees efectos de cientos de partículas, NO uses SphereGeometry. Usa una geometría súper básica (como un plano o un triángulo) y aplica una textura de círculo con transparencia. Ahorrarás miles de vértices por objeto.
Explorando Primitivas
// BoxGeometry(width, height, depth)
const box = new THREE.BoxGeometry(1, 1, 1);
// PlaneGeometry(width, height, widthSegments, heightSegments)
const plane = new THREE.PlaneGeometry(2, 2);
// SphereGeometry(radius, widthSegments, heightSegments)
// ¡Cuidado! Valores mayores a 32 consumen más recursos.
const sphere = new THREE.SphereGeometry(1, 32, 32);
// TorusGeometry(radius, tube, radialSegments, tubularSegments)
const donut = new THREE.TorusGeometry(1, 0.4, 16, 100);Diferentes geometrías rotando. (En modo Wireframe para ver su esqueleto)
Errores comunes
Practica lo aprendido
Crea el esqueleto de tu mundo.