如何在react-three-fiber的Drei平面实例中按状态切换材质与纹理？

需求：使用Drei库创建基于PlaneGeometry的实例，需根据每个实例的独立状态切换材质——状态为false时显示纯色StandardMaterial，状态为true时应用图片纹理（实例状态比例可自定义，例如20%为true、80%为false）。

最优实现方案：实例化属性（Instanced Attributes） #

核心思路是将每个实例的纹理状态存储为几何体的自定义属性，再在材质的着色器中读取该属性，通过自定义逻辑切换材质表现：

1. 给PlaneGeometry添加一个实例化属性（比如命名为isTextured），每个实例对应一个0或1的数值，标记是否启用纹理；
2. 扩展StandardMaterial的着色器代码，在片元着色器中根据isTextured的值判断：若为0则输出纯色，若为1则采样图片纹理输出。

这种方案支持任意数量的状态扩展，性能开销低，是实例化场景下材质切换的最优解。

调研过的其他方案及局限性 #

• 创建两个独立实例组（分别使用纯色材质和图片纹理）：仅能应对两种状态的简单场景，若后续需要扩展多种状态（如10种），会导致实例组数量激增，代码维护和性能控制都会变得困难。
• 用BoxGeometry模拟平面，根据状态显示对应面：仅适用于两种状态的2D场景，额外的几何体面会带来不必要的性能消耗，且逻辑扩展性极差。

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