How to make my babylon scene responsive?

Questions
1

I added a babylon scene to my react application and I need it to be responsive so that when the user restores down the web browser that he/she can still be able to see everything properly and work with objects on the scene.

Does anyone know a way to make it responsive?

2

Responsive usually defines the behavior on different screen sizes. But it seems like you refer to the user leaving and coming back to the browser. Babylon does support that, and there is no reason why it wouldn’t work in your app as well (just try leaving the playground and come back).
What is your use case, and what doesn’t work? without that it will be very hard to help

3

Hi ! Just like RaananW, I’m not sure what you mean by responsive. Did you mean “resize” instead of “restores” ?
If that is the case and you want the scene to resize when the window dimensions change, the way babylon does it is this :


    // Initialize
    const canvas = document.getElementById('renderCanvas')
    const engine = new BABYLON.Engine(canvas)
    // Watch canvas resize event to adjust the 3D scene 
    const resizeWatcher = new ResizeObserver(() => {
      engine.resize()
    })
    resizeWatcher.observe(canvas)
1 Like
4

Hello @Faber , Yes I mean resizing the window, I want the scene to be responsive in that meaning. The thing in my react application the scene is a jsx component that I created while following the setup of a babylon application in react and im not knowing where to add this code you are showing me.

5

Alright then, if it is in JSX there can be no playground. Can you share with us some of your code, especially where you are creating the Babylon engine and scene ?

6

I have the exact same setup to the component on the website here

7

Okay. See where you can find these two lines ?

const engine = new Engine(reactCanvas.current, antialias, engineOptions, adaptToDeviceRatio);
const scene = new Scene(engine, sceneOptions);

You should just be able to add the following right after :

const resizeWatcher = new ResizeObserver(() => {
      engine.resize()
})
resizeWatcher.observe(canvas)
2 Likes
8

@Faber Hello again, the thing is my scene is responsive and fits along with the size of the window, but Panels in the scene are not being responsive. Do you know why or how to fix this?

9

What do you mean by panels in the scene ?

Could you provide a tiny example in the playground ?

10

My exact same thought. Are these HTML elements created in JSX and layed over the canvas, or are they Babylon objects ?

If you can’t reproduce in the playground (although it would be really easier), can you maybe share a repo with us or a bit of code ?

1 Like
11

Do you want your 3d scene to be responsive as well? if doesn’t fit in the screen move it below?

@msDestiny14 might be able to help if you want your fullscreen GUI to be responsive, but it’s not an easy task to make an entire scene responsive. If this is what you want to achieve, you will need to check if a mesh is in the camera’s frustum, and move it accordingly. But a 3D scene is not a browser window. There is no “max width” and “max height”. there is also no grid system or flex boxes :slight_smile: But as everyone else said, we will need to know a bit more what your use case is in order to help.

1 Like
12

@RaananW - There are flex grid systems for 3D as here:
pmndrs/react-three-flex: :muscle::package: Flexbox for react-three-fiber (github.com)

Certainly the ResizeObserver is needed if you are resizing panels and with only the window resize listener, the engine itself would not resize when your resize panels. ResizeObserver has broad enough support now that it should be on the official example (it was not available until last year, so before that sample code was written).

1 Like
13

What i meant is that there is no native support for such a thing :slight_smile:
I am sure there are many projects that support that, but there is no gl.setGridSize call, or a universal box.flex=1.

2 Likes