Reputation: 161
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
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>
Upvotes: 29
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