初学three,记录一下three.js 创建一个可视化场景 批量创建对象

128 阅读1分钟

尝试第一种:批量创建作物的思路用的glb模型,通过加载一个glb模型,然后批量clone,大约复制了10000株植物,页面渲染的速度有一点卡了

尝试第二种:更换方案 InstancedMesh

THREE.InstancedMesh 是 Three.js 中的一个类,用于高效地渲染大量具有相同几何体和材质的对象。与传统的 THREE.Mesh 不同,InstancedMesh 通过一次绘制调用渲染多个实例,从而显著减少了 CPU 到 GPU 的数据传输,提高了渲染性能

简单模型通过这种方式也能实现

复杂模型有多个geometry 多个material,需要合并,遇到了瓶颈,不知道怎么合并

尝试第三种,3d缓存2d,采用粒子系统,通过创建大量粒子,添加植物的2d贴图,也能实现草地效果,虽然3d效果差了点,但是页面没有那么卡了

在 Three.js 里,粒子系统是用来创建大量微小粒子的工具,能够模拟出如烟雾、火焰、星空等效果。Three.js 提供了 THREE.Points 类来创建粒子系统,以下是对粒子系统的详细介绍和示例代码