How do people handle Mobile devices?

General question about how people are handling making sure their scenes look consistant on mobile devices.

If I have a scene with a cube. The cube is then moved (for example) 40 in the X direction. This may look great on a PC monitor, but when viewed on a tablet you can’t see the cube anymore as screen size and aspect ratio are different.

So using the official example of the transform controls here it is on my computer, as you can see I’ve moved the cube to the top right:

pc

when viewed on a tablet I’ll get the following (I’ve used Firefoxes device mode to demonstrate)

tablet

So you obviously cant see the cube.

How would one handle this sort of situation? Are people using specific/different camera zooms for mobiles and tablets? Or am I missing something obvious?!

“camera zoom” is probably not the right term. WebGL applications can be used on a variety of devices, all with different aspect ratios and resolutions.

Moving a cube to the window’s corner and then shrinking the window…well…it’s clear that the cube will not be visible anymore. This might also happen on mobile devices when the orientation is changed.

In general, you have to ensure that all important content is visible on different devices. You can do this in various ways like placing objects in the center of your scene.

I’m not quiet sure what you want to archive, make the camera move so all scene objects are always visible?

Maybe this helps https://github.com/mrdoob/three.js/pull/14526

Check out my codepen from that thread, it’s simpler than the code in the PR.

https://codepen.io/looeee/full/vwVeZB

2 Likes