FoliMesh

Modelos 3D estilo Low-poly para three.js

Los 42 modelos vienen en GLB con los niveles LOD0–LOD3 ya listos: se cargan con GLTFLoader de three/addons y se conectan a THREE.LOD mediante lod.addLevel(mesh, distance), así el nivel de detalle cambia en cada cuadro según la distancia de la cámara. Las hojas son geometría sólida, no tarjetas alfa, así que no hay alpha test ni overdraw transparente: el roble, el pino silvestre, el abedul y el bambú se mantienen livianos incluso en GPU de celulares.

El color vive en los vertex colours (COLOR_0), de modo que un solo material compartido alcanza para todos los árboles, cactus y piedras de la escena, y un InstancedMesh dibuja miles de copias en una sola llamada. Agrupa las instancias por chunk, ya que 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 pasa a Rapier o cannon-es, y todo corre tanto en WebGLRenderer como en WebGPURenderer.

Modelos
42
Niveles de detalle
LOD0 – LOD3
Formatos
GLB · FBX · OBJ

Acerca del estilo Low-poly

El low poly es el estilo más económico para renderizar y para publicar.

  • Sombreado plano: una normal por cara da el look facetado nítido, sin mapas de normales.
  • El color está en los vértices (glTF COLOR_0): sin texturas, sin trabajo de UV y casi sin memoria de video.
  • El follaje es geometría sólida, no tarjetas con alfa: sin alpha test ni overdraw transparente, algo clave en GPU de celulares.
  • Un solo material sirve para todos los modelos de la escena, así que los árboles se agrupan e instancian fácilmente.
  • Los presupuestos típicos van de unos cientos a un par de miles de triángulos en LOD0.

Funciona muy bien en celulares, 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; agrega 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 cuadro.
  • Bosques: InstancedMesh dibuja miles de copias en un solo draw call y BatchedMesh combina varias variaciones de árboles. THREE.LOD no funciona por instancia, así que agrupa tú las instancias por LOD en cada chunk.
  • Follaje: 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 biblioteca de física como Rapier o cannon-es.

Funciona tanto con WebGLRenderer como con WebGPURenderer.

Packs

Otras categorías

Lo mismo en otros estilos

Lo mismo para otros motores