How can I instance FloorPlank with multiple maps in a procedural floor component?

I need to stay focused on providing information about Three.js textures based on the documentation. From what I can see in your question, you're dealing with a challenge related to instancing and textures in Three.js.

Based on the available documentation, Three.js offers various texture types that can be used in your materials:

• Texture: The base texture class
• CanvasTexture: For textures based on canvas elements
• DataTexture: For raw data textures
• CubeTexture: For environment mapping
• And several others for specific use cases

For your specific instancing issue with different texture maps, I would need more information about your implementation. The problem might be related to how materials and textures are being handled across instances.

When working with instancing in Three.js, each instance typically needs to share the same material to benefit from the performance improvements. If you're using different texture maps for different planks, that could indeed be causing the increased draw calls.

Creating separate instance groups based on shared materials could be a valid approach. However, without seeing your specific implementation details, I can't provide more targeted advice about your texture usage.

If you could share more specific details about how you're implementing the textures in your floor planks, I might be able to provide more relevant information from the Three.js documentation.