How to set a plane to be the size of the camera React-Three-Fiber?

Question

I'm trying to add a 3D effect on a plane in a React site. But I haven't been able to create a plane that fills the camera, like in all the Three.js shader or post-processing examples.

I have tried using an Orthographic Camera + plane, based on this answer, like so:

<Canvas>
  <OrthographicCamera left={-1} right={1} top={1} bottom={-1} near={0} far={1} />
    <planeGeometry args={[2, 2]} />
  </OrthographicCamera>
</Canvas>

But this results in a small square in the middle of the canvas.

I also tried using a ScreenQuad, like so:

<Canvas style={{width: '100vw', height: '100vh'}}>
  <ScreenQuad />
</Canvas>

But this results in a triangle in the middle of the canvas.

Here is a repo reproducing both examples: https://github.com/Cecile-Lebleu/gatsby-r3f-bug

I can only cover the Canvas by blowing up the size of the plane, but it's not a good solution: the effect looks giant on small screens and still cropped on larger screens.

What's going on? How can I make a simple plane that covers the camera regardless of Canvas size?

Answer 1

如果有人遇到这个问题，解决方案感谢@0xca0a：

将相机设置为默认：<OrthographicCamera makeDefault>

并缩放网格以适合视口。

const viewport = useThree(state => state.viewport)
return (
  <mesh scale={[viewport.width, viewport.height, 1]}>
    <planeGeometry />
  </mesh>

在useAspect中添加响应式图像：

function Scene() {
  const size = useAspect(1800, 1000)
  return (
    <mesh scale={size}>
)}

前两个参数是图像的宽度和高度，然后它计算一个足以覆盖的视口，并且它是响应式的。

或者只使用drei/image。