I have implemented a custom UI panel for the parameter input and another for displaying the script output. I would like them to follow the same display logic as the default parameter and settings panels. Those seem have portrait and landscape classes added to the HTML elements as the screen size changes. What are the breakpoints that I should use when listening for view size changes?
Here is a quick overview of the logic we use for the viewer layout:
-
In landscape mode, the parameter panel is aligned to the right with a fixed width of 250px and a one-column layout (all parameters are full width).
-
In portrait mode, the parameter panel is aligned to the bottom with a fixed height of 240px and a four-column layout. There is additional logic regarding how many columns each parameter occupies, with several breakpoints related to the viewer width. I can’t give you the precise breakdown of those rules as I don’t know them exactly, but they can be reverse-engineered by playing with the viewer width. In most cases, there are two parameters per line for screens wider than a mobile phone, and one parameter per line on mobile.
-
Now the general rule for switching between landscape and portrait mode depends only on the size of the 3D canvas (therefore excluding the parameter panel). When the width of the 3D canvas is larger than its height, we use landscape mode, and portrait mode otherwise. Given the fixed size of the parameter panel, one can derive the relation with respect to the total size of the viewer: the breaking point is at
viewer width - 250 = viewer height.
1 Like