admin管理员组

文章数量:1405165

I want to apply this style to a sibling div container mix-blend-color-burn. However, I've just noticed that the canvas is being wrapped within 2 div containers:

<div> <!-- Wrapper 1 -->
  <div> <!-- Wrapper 2 -->
    <canvas></canvas> <!-- R3F canvas -->
  </div>
</div>

Which cause the effect to not work at all.

main component:

<div className="w-full h-full">
      <CanvasWorld />
      <div
        className="mix-blend-color-burn  absolute z-10 inset-0  
        flex justify-center items-center
      pointer-events-none "
      >
        <h1 className="mix-blend-color-burn text-[#252525] font-bold">
          Avid Software Engineer with +3 years of experience
        </h1>
      </div>
    </div>

The canvasworld component:

<div className="h-screen w-full webgl-world relative bg-transparent">
  <Canvas className="block">
    {/* <color attach={"background"} args={["red"]} /> */}
    <CameraControls makeDefault />
    <mesh>
      <boxGeometry />
      <meshBasicMaterial />
    </mesh>
  </Canvas>
</div>

本文标签： How to prevent extra div wrappers around the canvas in React Three Fiber (R3F)Stack Overflow

版权声明：本文标题：How to prevent extra div wrappers around the canvas in React Three Fiber (R3F)? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744247104a2597071.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。