three.js向けヤシ GLBモデル・LOD付き

three.js向けヤシ

ココヤシ、ナツメヤシ、カナリーヤシ、ワシントンヤシ、ヨーロッパナツメヤシは、three/addons の GLTFLoader でそのまま読み込める軽量な GLB ファイルです。各モデルは LOD0〜LOD3 の4段階を持ち、lod.addLevel(mesh, distance) で THREE.LOD に渡せば、カメラ距離による切り替えはレンダラーに任せられます。

ビーチや島のシーンでは、InstancedMesh が幹と葉のコピーを数千個まとめて1回のドローコールで描画し、BatchedMesh は5種を1つのチャンクに混在させます。葉は alpha test で輪郭を保ち、ソートのコストもかかりません。見えないコリジョンメッシュは Rapier や cannon-es に渡せ、書き出しは WebGLRenderer と WebGPURenderer の両方で動きます。

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 などの物理ライブラリに渡します。