InstancedMesh Hex

An alternative to 'fromInstance' prop for meshes is to use instanced meshes. You can read up more on "InstancedMesh" in babylon.js, but they have less overhead of separate instancing hundreds of meshes.

Essentially in this example we create a single "hex" mesh. Then we add hundreds of instances using that mesh as a source. Each instance is set with it's own position and color.

<instancedMesh
  source={hexMesh}
  key={i}
  name={`hex-${i}`}
  position={
    new Vector3(
      x + tile.width() / 2 - GRID_WIDTH * 0.75,
      y + tile.height() / 2 - (Math.sqrt(3) * GRID_HEIGHT) / 2,
      0
    )
  }
  instancedBuffers={{
    color: tile.isHovered ? HOVER_COLOR : tile.color,
  }}
/>