How to SET canvas size Declarative? #630

MaxmaxmaximusAWS · 2020-08-18T22:24:56Z

MaxmaxmaximusAWS
Aug 18, 2020

Hi, 👋

How to SET canvas size Declarative?

<Canvas style={{width: `900px`}}>

Is the correct way? this is not in the documentation just

And how to declarative resize canvas?

drcmda · 2020-08-19T06:04:11Z

drcmda
Aug 19, 2020
Maintainer

the size is always the size of its parent container, it's responsive by default. if the relative or absolute parent is 100%/100% it fills the screen, if the parent is fixed, it's fixed.

2 replies

VityaSchel May 9, 2021

I wanted to fix threejs bug when object disappearing if pivot out of camera view by using css power but I can't even resize canvas. Maybe just switch to another javascript 3d framework?

drcmda May 9, 2021
Maintainer

im not sure what you mean, you can easily resize the canvas by resizing the absolute/relative parent it is in.

<div style={{ position: "relative", width: 300, height: 300 }}>
  <Canvas>
    ...

canvas is fully responsive towards its parent, it always fills it out. that style prop directly on the canvas directly will work as well. it needs to be relative/absolute because that's how css works.

you can also just set a fixed size using the render api: https://docs.pmnd.rs/react-three-fiber/API/render-function

so yes, i think the only option is to switch the 3d framework. 🤷‍♂️

MaxmaxmaximusAWS · 2020-08-19T15:57:44Z

MaxmaxmaximusAWS
Aug 19, 2020
Author

the size is always the size of its parent container, it's responsive by default. if the relative or absolute parent is 100%/100% it fills the screen, if the parent is fixed, it's fixed.

not in:

display: flex
align-items: center
justify-content: center

^__^

So please tell me if I manually set the canvas size in css, the inner world of THREE.js will adjust to this? How to resize the inner world of three.js? I can just use CSS to stretch and shrink the canvas, three.js will react to this? For example, if I set the canvas width to 50% and then change the width of the parent, does three.js adapt to the resized canvas?

4 replies

drcmda Aug 19, 2020
Maintainer

in css "100%" is relative to next node that has position: "relative" or "absolute", it does not matter if it displays flex or not. canvas is wrapped in a normal div, you can see it in devtools. you can also give it styles <Canvas style={...} /> but it adheres to the same rules as any other div, no special rules.

skrat Oct 19, 2021

Having the same issue, trying to use Canvas in a flexbox layout, and it just doesn't work. Here, no Canvas

and here with Canvas in it

it just takes over, no matter the position: relative on the parent. width/height with 100% simply don't play well with flexbox and there should be a way to turn this off.

drcmda Oct 19, 2021
Maintainer

you're dealing with plain css. r3f canvas is just a div. you can fill a flexbox item to 100%, i've done it before. you either don't set relative on the right spot or you're missing something else.

drcmda Oct 19, 2021
Maintainer

https://codesandbox.io/s/basic-demo-forked-wc063?file=/src/index.js

higherstates · 2022-01-02T02:51:23Z

higherstates
Jan 2, 2022

Hi there,
This is my first time using React Three Fiber as I'm following a tutorial from 2020

My Canvas currently has a width & height of 1353x150px and I don't know where it comes from because I'm not using any fixed unit in my CSS.

I have html, body, #root, .container width & height 100%

The Canvas stays at 150px height and is cutting off my content inside.
If I resize the window, only the width of the Canvas is responsive, the height stays the same 150px.

Can you help me with this problem? The height doesn't seem to be responsive like you said:

the size is always the size of its parent container, it's responsive by default. if the relative or absolute parent is 100%/100% it fills the screen, if the parent is fixed, it's fixed.

Here's my App.js

import './App.css';
import Header from './components/Header'
import { Section } from './components/Section'
import { Canvas } from '@react-three/fiber'
import { Html } from '@react-three/drei'

const HTMLContent = () => {
  return (
    <Section factor={1.5} offset={1}>
      <group position={[0, 50, 0]}>
        <Html fullscreen>
          <div className="container">
            <h1 className="title">Hello</h1>
          </div>
        </Html>
      </group>
    </Section>
  )
}

function App() {
  return (
    <div className="App">
      <Header />
      <Canvas
        colorManagement
        camera={{position: [0, 0, 20], fov: 70}}
      >
        <HTMLContent />
      </Canvas>
    </div>
  );
}

export default App;

Image of content being cut off:

5 replies

RenoBozo Jan 2, 2022

I'm looking for the same thing, curious!

higherstates Jan 2, 2022

@RenoBozo
If you have html, body, #root height 100% like me, maybe the problem is in the <div> container of App.js
I changed the JSX of App.js

function App() {
  <div className="App">
      <Canvas>
        ...
      </Canvas>
  </div>
}

into React Fragment tags

function App() {
  return (
    <>
      <Canvas>
          .....
      </Canvas>
    </>
  )

This works for me, let me know if this work for you as well

drcmda Jan 2, 2022
Maintainer

the canvas takes the size of its relative/absolute parent. in css width: 100%/ height: 100% does not refer to the parent node, but the closest node that is either relative or absolute.

ps @higherstates i hope <Html> does not refer to the drei/Html component, that is not supposed to be used outside of canvas.

higherstates Jan 2, 2022

@drcmda
Yes! Thank you for clarifying. I have edited my code above.
Hope this can help someone out :)

Pariss1977 Jan 26, 2024

@higherstates changes to React Fragment tag really work. Thank you a lot! I spent several hours to solve the problem of 150px height and the solution comes to be so easy

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

How to SET canvas size Declarative? #630

{{title}}

Replies: 3 comments 11 replies

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

Select a reply

How to SET canvas size Declarative? #630

Replies: 3 comments · 11 replies

drcmda Aug 19, 2020 Maintainer

drcmda May 9, 2021 Maintainer

MaxmaxmaximusAWS Aug 19, 2020 Author

drcmda Aug 19, 2020 Maintainer

drcmda Oct 19, 2021 Maintainer

drcmda Oct 19, 2021 Maintainer

drcmda Jan 2, 2022 Maintainer

Replies: 3 comments 11 replies

drcmda
Aug 19, 2020
Maintainer

drcmda May 9, 2021
Maintainer

MaxmaxmaximusAWS
Aug 19, 2020
Author

drcmda Aug 19, 2020
Maintainer

drcmda Oct 19, 2021
Maintainer

drcmda Oct 19, 2021
Maintainer

drcmda Jan 2, 2022
Maintainer