FoliMesh

适用于three.js的树木

每棵树都是轻量 GLB,用 three/addons 里的 GLTFLoader 直接载入;只有文件确实用到相关扩展时才需要 DRACOLoader 或 KTX2Loader。所有模型都带 LOD0–LOD3,把四层网格交给 THREE.LOD,再用 lod.addLevel(mesh, distance) 添加,之后每帧按相机距离自动切换,WebGLRenderer 和 WebGPURenderer 都适用。使用 glTF alphaMode MASK 的叶片会变成 material.alphaTest,双面材质已设为 side: THREE.DoubleSide。

这 14 棵树覆盖森林、公园与村庄:温带场景用橡树、欧洲赤松、云杉、白桦、垂柳、山杨、枫树和杨树,地中海景观用油橄榄、柏树和意大利石松,干旱地带用金合欢和猴面包树,另有一棵枯树。原点在根部,放到地形上只需设置一次位置。用 InstancedMesh 可以一次绘制上千棵树,BatchedMesh 能在一次调用里混合多个变体;THREE.LOD 不作用于单个实例,所以要按区块按层级分组。不可见的碰撞网格可直接交给 Rapier 或 cannon-es。

模型
14
细节层级
LOD0 – LOD3
格式
GLB · FBX · OBJ

在three.js中使用

在 three.js 中,用 three/addons 里的 GLTFLoader 加载 GLB;只有当文件使用相应扩展时才需要 DRACOLoader 或 KTX2Loader。

  • 距离 LOD:使用 THREE.LOD,通过 lod.addLevel(mesh, distance) 添加 LOD0–LOD3,每帧根据与相机的距离切换级别。
  • 森林:InstancedMesh 一次 Draw Call 即可绘制成千上万个副本,BatchedMesh 可混合多种树木变体。THREE.LOD 不会作用于单个实例,需要自己按区块将实例按 LOD 分组。
  • 树叶:glTF 的 alphaMode MASK 会转换为 material.alphaTest,双面材质会自动设置 side: THREE.DoubleSide。
  • 碰撞网格:设为不可见,并交给 Rapier 或 cannon-es 等物理库使用。

同时适用于 WebGLRenderer 和 WebGPURenderer。

资源包

其他类别

其他风格的同款

其他引擎的同款