【问题标题】:Toggle materials in an instance in react-three-fiber在反应三纤维的实例中切换材料
【发布时间】:2023-02-15 17:15:12
【问题描述】:

我有一个使用Drei库的实例平面几何. 根据状态,我想为每个实例显示不同的材料:

  • 状态是错误的:用简单的颜色显示标准材质
  • 状态是真的:应用不同的纹理(图像) 每个实例都有自己的状态(例如 20% 可以为真,80% 可以为假,或其他比率)

最好的方法是什么?

研究解决方案

  1. 有 2 个不同的实例(一个用于彩色材质,一个用于图像纹理):

    当我们只有 2 个状态时没问题,但是如果我们有 10 个可能的状态怎么办? (在这种情况下最好的解决方案是什么?)

    1. boxGeometry表示一个平面,根据状态显示合适的人脸

    它也仅在我们只有 2 个状态且处于 2D 中时才有效

【问题讨论】:

    标签: three.js react-three-fiber react-three-drei


    【解决方案1】:

    如果您只想在纯色和纹理之间切换,我认为您不需要更改材质。你可以在材质着色器中做一些改变,你可以根据状态将 vec4 传递给片段着色器中的 gl_fragColor,你可以将状态作为属性传递给网格,因为你使用实例化的 mes,你可以使用 instancedAttribute。我有用于在实例化网格的每个对象上使用不同纹理的解决方案的代码和框,所以我对该代码进行了更改以解决您的问题(或者至少我认为是解决方案)https://codesandbox.io/s/toggle-texture-of-instanced-mesh-ptcvbb您可以通过单击切换每个平面的状态在上面。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2021-08-11
      • 2021-11-11
      • 2022-12-23
      • 1970-01-01
      • 2021-03-10
      • 1970-01-01
      • 2021-04-18
      • 2021-07-11
      相关资源
      最近更新 更多