Jump to content

Engine resizing method


Recommended Posts

Hello everybody!

I have an issue with the resizing method which depends on screen size. When you resize the height of your window, all the elements in the scene are zoom-in or out when the screen height is bigger or smaller. I understand the logic because the bigger your screen is and the more you want to show.

First I wonder why the camera position is unchange when the screen size change because the effect really looks like the camera is going up and down?

Then in my specific case I don't want this effect to happen and need all the elements to keep the same size in the screen whether this is a big one or not. But didn't find a solution yet.
I could set the camera position depending on the height of the screen but it doesn't seem really reliable. 

Thanks for your help! PICHOU


Link to comment
Share on other sites

Hum not really,

With your "fitToView" function you can see in the playground that the skull size is still changing when you change the window height.

Then the last suggestion of Ericky14 is actually to update the camera position/radius which I would prefer to avoid because I am not sure I will always have the exact same result depending on screen size with that method.

Thanks for the topic though, the questions are similar indeed! ;)

Link to comment
Share on other sites

It's a bit of a workaround, but how about simply putting everything in your scene into a mesh container, then scaling that container according to engine._renderingCanvas.width / height or something similar after every engine.resize()?

I suppose you'd have an ideal stage size. Let's say you have idealSize.width and/or idealSize.height. I think you'd have to choose one and scale according to it.

var scale = idealSize.width / engine._renderingCanvas.width;

container.scaling.x = scale;
container.scaling.y = scale;
container.scaling.z = scale;

I didn't really think this through but I think it might be a good place to start.

Link to comment
Share on other sites

The thing I use right now is the camera . I simple set the camera position depending on canvas height : 

    window.onresize = () => {
      camera.position.z = -10 - (canvas.height - 500)/50;

And it works, with that simple equation I manage to have the expected behavior. 
But I don't know, I feel like this is not reliable and that the size could still change depending on screens (I have test it only on mine for now).

I have made a playground so that you can see the result : http://playground.babylonjs.com/#ZR8GLF#1

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...