Thomas G.
Thomas G.

Reputation: 161

Three-fiber canvas size

I have a question regarding the three-fiber canvas size. I need a fixed canvas width and height. Unfortunately I have not found out how to change the canvas width and height. Even though I can change the sizes with style={{width: 100px, height: 100px}}, it is not the right thing. The canvas should be bigger than the div. does anyone have an idea how to do this with three-fiber?

<Canvas
    size={[`2000px`,`3000px`]}
    style={{width: `100%`, height: `auto`, position: `relative` }}
    ref={canvas}
    shadows
    camera={{position: [10, 0, 80], fov: 45}}
>
    <Suspense fallback={false}>
        <Content/>
    </Suspense>
</Canvas>

Upvotes: 16

Views: 29805

Answers (2)

James Craig
James Craig

Reputation: 6854

React Three Fiber's canvas will take the width and height of the parent container.

Instead of setting the width and height on the Canvas component, try setting the width and height on the parent instead, like this:

<div style={{ width: "50vw", height: "50vh" }}>
  <Canvas flat linear>
    <App />
  </Canvas>
</div>

View Demo

Upvotes: 29

investInSoup
investInSoup

Reputation: 205

Canvas in three-fiber takes on the width of its parent container. just resize whatever div it is being contained by.

Upvotes: 3

Related Questions