Modelli 3D realistici per three.js

Modelli 3D in stile Realistico per three.js

La vegetazione realistica si carica in three.js senza conversioni: il GLB entra con GLTFLoader da three/addons e i materiali PBR metal/roughness — corteccia con mappe base color, normal e roughness, foglie come card mascherati — vengono resi così come sono stati creati. DRACOLoader o KTX2Loader servono solo se il file usa quelle estensioni. Le mesh LOD0–LOD3 si inseriscono in THREE.LOD con lod.addLevel(mesh, distance): il cambio di livello avviene a ogni frame in base alla distanza della camera.

Dei 42 modelli — Quercia, Pino silvestre, Abete rosso, Betulla, Salice piangente, Ulivo, Palma da cocco — si costruisce sia un bosco sia un deserto. InstancedMesh disegna la massa, BatchedMesh mescola più specie in un chunk; dato che THREE.LOD non vale per istanza, conviene raggruppare le istanze per livello e chunk. La mesh di collisione resta invisibile e va passata a Rapier o cannon-es. Adatto a giochi in prima e terza persona, survival, open world e simulatori su PC e console; su mobile parti da LOD1 o LOD2 e controlla l'overdraw dei card delle foglie.

Informazioni sullo stile Realistico

I modelli realistici usano il workflow PBR metal/roughness, letto direttamente da glTF 2.0, Unity, Unreal, Godot e three.js.

Corteccia: mappe di colore, normali e roughness su tronco e rami.
Foglie: card in alpha test (masked) con texture di gruppi di foglie, non in alpha blend: scrivono la profondità, non richiedono ordinamento e proiettano ombre corrette.
Corteccia e fogliame hanno materiali separati, quindi le draw call restano prevedibili e il GPU instancing funziona bene.
LOD0 è per i primi piani; LOD1–LOD3 eliminano rami e card di foglie, e l’ultimo livello è abbastanza leggero per la distanza.

Ideali per giochi in prima e terza persona, survival, open world e simulatori su PC e console. Su mobile usa LOD1 o LOD2 come livello più vicino e tieni d’occhio l’overdraw del fogliame.

Uso in three.js

In three.js carica il GLB con GLTFLoader da three/addons; aggiungi DRACOLoader o KTX2Loader solo se un file usa quelle estensioni.

LOD a distanza: THREE.LOD con lod.addLevel(mesh, distance) per LOD0–LOD3; il livello cambia in base alla distanza dalla camera a ogni frame.
Foreste: InstancedMesh disegna migliaia di copie in una sola draw call, e BatchedMesh mescola più varianti di alberi. THREE.LOD non agisce per istanza, quindi raggruppa tu le istanze per LOD in ogni chunk.
Foglie: l’alphaMode MASK di glTF diventa material.alphaTest, e i materiali double-sided ricevono automaticamente side: THREE.DoubleSide.
Mesh di collisione: lasciala invisibile e passala a una libreria fisica come Rapier o cannon-es.