three.js向け樹木モデル — LOD0〜LOD3のGLB

three.js向け樹木

各樹木は軽量なGLBで、three/addonsのGLTFLoaderからそのまま読み込めます。DRACOLoaderやKTX2Loaderは、ファイルが実際にその拡張を使う場合だけ必要です。全モデルにLOD0〜LOD3があり、4つのメッシュをTHREE.LODに渡してlod.addLevel(mesh, distance)で登録すれば、以降はカメラ距離に応じて毎フレーム切り替わります。WebGLRendererでもWebGPURendererでも同じです。glTFのalphaMode MASKの葉はmaterial.alphaTestになり、両面マテリアルはside: THREE.DoubleSideが設定済みです。

収録した14本は森林や公園、村のシーンに向きます。温帯にはオーク、ヨーロッパアカマツ、トウヒ、シラカバ、シダレヤナギ、ヤマナラシ、カエデ、ポプラ、地中海にはオリーブ、イトスギ、カサマツ、乾燥地帯にはアカシアとバオバブ、さらに枯れ木。ピボットは根元にあり、地形への設置は位置を合わせるだけです。InstancedMeshなら数千本を1回のドローで描け、BatchedMeshは複数バリエーションを1回の呼び出しにまとめます。THREE.LODはインスタンス単位では効かないため、チャンクごとにレベル別でまとめてください。見えないコリジョンメッシュはRapierやcannon-esに渡せます。

three.jsでの使い方

three.js では three/addons の GLTFLoader で GLB を読み込みます。DRACOLoader や KTX2Loader は、ファイルがその拡張を使う場合のみ必要です。

距離 LOD：THREE.LOD に lod.addLevel(mesh, distance) で LOD0〜LOD3 を登録すると、毎フレームカメラとの距離でレベルが切り替わります。
森：InstancedMesh なら数千本を 1 回のドローコールで描画でき、BatchedMesh では複数の樹木バリエーションを混在させられます。THREE.LOD はインスタンス単位では効かないため、チャンクごとに LOD 別のインスタンスグループを自前で管理します。
葉：glTF の alphaMode MASK は material.alphaTest に、両面マテリアルは自動で side: THREE.DoubleSide になります。
コリジョンメッシュ：非表示にして、Rapier や cannon-es などの物理ライブラリに渡します。