FoliMesh

three.js向け3Dアセットパック

8 つの GLB パック — Free Sampler、Temperate Forest、Conifer Forest、Tropical Beach、Savanna & Dry Lands、Desert Kit、Low-Poly Starter、Rocks & Cliffs — は three/addons の GLTFLoader でそのままブラウザに読み込めます。DRACOLoader や KTX2Loader は、ファイルがその拡張を使う場合だけ追加してください。樹木・ヤシ・サボテン・岩はいずれも LOD0–LOD3 を持ち、THREE.LOD の lod.addLevel(mesh, distance) がカメラ距離に応じて毎フレーム切り替えます。

葉は glTF の alphaMode MASK を使い、material.alphaTest として反映されます。両面マテリアルには side: THREE.DoubleSide が自動で付きます。密な森では InstancedMesh が数千のコピーを 1 ドローコールで描き、BatchedMesh は複数バリエーションを混在させられます。THREE.LOD はインスタンス単位では効かないため、チャンクごとに LOD 別でまとめてください。コリジョンメッシュは非表示のまま Rapier や cannon-es に渡します。GLB・FBX・OBJ で書き出せ、スタイルはリアルから低ポリまで、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 などの物理ライブラリに渡します。

WebGLRenderer と WebGPURenderer のどちらでも動作します。

パック

他のスタイルで見る

他のエンジン向け