Threejs mobile responsiveness

Questions
1

Im quite new to threejs and somehow my whole scene is rendering fine with proper aspect ratio if viewed on a laptop or a tablet. But on mobile, the object gets cut out from the scene in order to maintain the aspect ratio. How can I resize my objects so that they all appear the same way as in laptop.

all my geometries are taking constant width and height, do I need to change the width and height of my geometries to vary with the scene size? and how can I do that?

this is my site:
(http://shashwat-kumar.com)

Thank you.

2

Hi Shashwat_Kumar
You can try this, in resize callback function:

function onResize() {
      const w = window.innerWidth;
      const h = window.innerHeight;
      camera.aspect = w / h; 
      if (camera.aspect > 1) {
        //portrate ... (if needed) you can modify camera.z using camera.aspect as coefficient 
        //or object width
      } else {
        //landscape
      }
      camera.updateProjectionMatrix();

      //your other stuff ...
}

I hope it’s usefull

edit:

if(camera.aspect>1){
      camera.position.z = your_start_camera_distance/camera.aspect;
}else{
      camera.position.z= your_start_camera_distance;
}

should preserve the aspect of an object placed in world origin

3

Hi @alessandro_guarino .
Thank you for your reply. This is working, thank you so much!. Although, I dont understand how do I get the start_camera_distance, so Im basically hardcoding the values.

4

Oh! your_start_camera_distance it’s a variable name sample (cause I don’t know your camera distance).

If you don’t have other camera interaction it’s not needed and you can use an hardcoded value, but it’s a good practice, in order to reuse your code easely, to declare a variable… so when you need to change your starting distance you have to change only a number instead of 4: 2 into init and 2 into resize

5

Ohh now I get it. Thank you so much for your help and advice. Much appreciated!