Modelos 3D low-poly para three.js

Modelos 3D estilo Low-poly para three.js

Los 42 modelos llegan en GLB con los niveles LOD0–LOD3 ya incluidos: se cargan con GLTFLoader desde three/addons y se pasan a THREE.LOD con lod.addLevel(mesh, distance), de modo que el detalle cambia cada fotograma según la distancia de cámara. Las hojas son geometría sólida y no tarjetas alfa, así que no hay alpha test ni overdraw transparente: el roble, el pino silvestre, el abedul y el bambú siguen siendo baratos incluso en GPU móviles.

El color va en los vertex colours (COLOR_0), por lo que un único material compartido cubre todos los árboles, cactus y rocas de la escena, y un InstancedMesh dibuja miles de copias en una sola llamada. Conviene agrupar las instancias por chunk, porque THREE.LOD no se aplica por instancia. Los presupuestos van de unos cientos a un par de miles de triángulos en LOD0. La malla de colisión invisible se conecta a Rapier o cannon-es, y todo funciona con WebGLRenderer y WebGPURenderer.

Sobre el estilo Low-poly

El low poly es el estilo más barato de renderizar y de distribuir.

Sombreado plano: una normal por cara da el aspecto facetado nítido, sin mapas de normales.
El color va en los vértices (glTF COLOR_0): sin texturas, sin trabajo de UV y casi sin memoria de vídeo.
Las hojas son geometría sólida, no tarjetas con alfa: sin alpha test ni overdraw transparente, algo clave en GPU móviles.
Un único material sirve para todos los modelos de la escena, así que los árboles se agrupan e instancian con facilidad.
Los presupuestos habituales van de unos cientos a un par de miles de triángulos en LOD0.

Encaja en móviles, WebGL/WebGPU, VR, estrategia, city builders y juegos indie estilizados. En el motor, usa un material que multiplique por el color de vértice.

Uso en three.js

En three.js, carga el GLB con GLTFLoader de three/addons; añade DRACOLoader o KTX2Loader solo si un archivo usa esas extensiones.

LOD por distancia: THREE.LOD con lod.addLevel(mesh, distance) para LOD0–LOD3; cambia de nivel según la distancia a la cámara en cada fotograma.
Bosques: InstancedMesh dibuja miles de copias en un solo draw call y BatchedMesh mezcla varias variaciones de árboles. THREE.LOD no actúa por instancia, así que agrupa tú mismo las instancias por LOD en cada chunk.
Hojas: el alphaMode MASK de glTF se convierte en material.alphaTest y los materiales de doble cara reciben side: THREE.DoubleSide automáticamente.
Malla de colisión: déjala invisible y pásala a una librería de física como Rapier o cannon-es.