FoliMesh

Bäume im Stil Realistisch für three.js

Realistische Bäume kommen über GLTFLoader aus three/addons direkt in die three.js-Szene: Das GLB bringt LOD0–LOD3 mit, die sich an THREE.LOD übergeben lassen. Jede Stufe per lod.addLevel(mesh, distance) registriert, schaltet der Renderer sie pro Frame nach Kameradistanz um — wichtig, wenn eine Eiche, eine Waldkiefer oder eine Trauerweide direkt im Weg der Ego-Perspektive steht.

Im Wald hält InstancedMesh tausende Stämme in einem Draw Call, während BatchedMesh Varianten von Fichte, Birke und Ahorn mischt; THREE.LOD arbeitet pro Objekt, also Instanzen im Chunk selbst nach Stufe gruppieren. Blätter sind alpha-getestete Karten (glTF alphaMode MASK wird zu material.alphaTest, doppelseitige Materialien erhalten THREE.DoubleSide), brauchen kein Sortieren und werfen korrekte Schatten. Kollisionsmeshes bleiben unsichtbar für Rapier oder cannon-es; alles läuft unter WebGLRenderer und WebGPURenderer.

Modelle
14
Detailstufen
LOD0 – LOD3
Formate
GLB · FBX · OBJ

Über den Stil Realistisch

Realistische Modelle nutzen den PBR-Workflow Metal/Roughness, den glTF 2.0, Unity, Unreal, Godot und three.js direkt lesen.

  • Rinde: Base-Color-, Normal- und Roughness-Maps auf Stamm und Ästen.
  • Blätter: alpha-getestete (Masked) Cards mit Blattbüschel-Texturen statt Alpha-Blending – sie schreiben Tiefe, brauchen keine Sortierung und werfen korrekte Schatten.
  • Rinde und Laub haben getrennte Materialien; die Zahl der Draw Calls bleibt planbar und GPU-Instancing funktioniert problemlos.
  • LOD0 ist für die Nahansicht; LOD1–LOD3 entfernen Äste und Blatt-Cards, die letzte Stufe ist leicht genug für große Entfernungen.

Ideal für First- und Third-Person-Spiele, Survival, Open Worlds und Simulationen auf PC und Konsole. Auf Mobilgeräten LOD1 oder LOD2 als nächste Stufe verwenden und den Overdraw des Laubs im Blick behalten.

Verwendung in three.js

In three.js GLB mit dem GLTFLoader aus three/addons laden; DRACOLoader oder KTX2Loader nur ergänzen, wenn eine Datei diese Extensions nutzt.

  • Distanz-LOD: THREE.LOD mit lod.addLevel(mesh, distance) für LOD0–LOD3; die Stufe wechselt jeden Frame nach Kameraabstand.
  • Wälder: InstancedMesh zeichnet Tausende Kopien in einem Draw Call, BatchedMesh mischt mehrere Baumvarianten. THREE.LOD wirkt nicht pro Instanz, daher Instanzen pro Chunk selbst nach LOD gruppieren.
  • Laub: glTF-alphaMode MASK wird zu material.alphaTest, doppelseitige Materialien erhalten automatisch side: THREE.DoubleSide.
  • Kollisionsmesh: unsichtbar lassen und an eine Physik-Bibliothek wie Rapier oder cannon-es übergeben.

Funktioniert mit WebGLRenderer und WebGPURenderer.

Pakete

Weitere Kategorien

Dasselbe in anderen Stilen

Dasselbe für andere Engines