React Three Fiber中管理大量动态对象的最佳实践是什么？

我希望用React Three Fiber在屏幕上显示多达1000个对象，这些对象会根据业务逻辑在运行时创建，不再需要时销毁。我见过的大多数示例都使用固定数量的对象，仅重置位置而非实际创建/销毁。

示例场景 #

一个交通模拟器，场景为几个城市街区的固定俯视图。
车辆在场景中行驶，每辆车都有独特属性，屏幕上车辆的数量和类型会根据用户配置设置变化。
车辆从场景边缘“生成”，离开场景后即不复存在。

我的尝试方案 #

方案A：使用instancedMesh #

该方案支持性能优化，但我找不到跟踪可变数量对象的示例；此外，似乎需要为每种可绘制车辆类型（如卡车vs轿车）创建多个instancedMesh。

方案B：维护车辆数组 #

我可以存储所有车辆的数组，通过类似以下代码渲染：

let vehicles = [ { id: 'a', position: [1,2,3] } ]

// 更新车辆属性
useFrame(( _, delta) => {
  // 条件添加车辆，忽略id/position的具体生成逻辑
  if( Math.random() < 0.2 ) { 
    vehicles.push( { id: '?', position: [2,3,4] } ) 
  }

  // 遍历计算：速度*时间更新每辆车的位置
  // 如果车辆超出边界，标记为待移除

  // 移除标记为待删除的车辆
  vehicles = vehicles.filter( v => v.toBeRemoved !== true )
})

return vehicles.map((vehicle) =>
  (<Vehicle key={vehicle.id} position={vehicle.position} />)
)

如果我的理解正确，该策略可能会在每帧重新分配数组，给React的变更检测带来大量压力。

方案C：miniplex（ECS） #

该方案看似可行，但我找不到可用示例，相关文档要么不适用，要么尚未完善。

我是图形领域新手，可能遗漏了某些关键点。

内容的提问来源于stack exchange，提问作者cmonkey