Fit camera to viewport minimum and cube without fov or width and height affecting

Questions
1

I want to set my camera in a way that it will always fit the 1x1 aspect in any fov or camera type but defaultly threejs always fits height.

image
image2048×2048 136 KB

2

I’m sure you have already searched the forum and found a bunch of ideas like this one for orthographic camera and that one for perspective camera.

Good luck with your project.

1 Like
3

Yeah XD I found these but I wanted something that doesn’t change camera.zoom cause it will make problems when I need to use custom zoom with orthographic camera

camera.position.z = (size/2)/(Math.tan(camera.fov*(Math.PI/180)/2))+size/2;

camera.resize = () => {
  renderer.setSize(window.innerWidth,window.innerHeight);
  camera.aspect = window.innerWidth/window.innerHeight;
  camera.zoom = camera.aspect<=1?camera.aspect:1;
  camera.updateProjectionMatrix();
}
camera.resize();
window.addEventListener("resize", camera.resize);

I need to find out is it possible to change the zoom directly and also change between perspective or orthographic fast

4

Maybe .setViewport is what you need? You can limit the rendering area to a square (i.e. 1:1 aspect) of your choice.

2 Likes
5

I was killing myself trying to find correct fix and now see that there is inbuilt function to do it :laughing: Thanks a lot!

1 Like
6

You may also just make the canvas square and centered it in the web page. There is no need to cover the whole window with the canvas if you will only draw in its center.

2 Likes
7

If someone else was looking for the code here it is :smile:

//--s is distance and f is camera fov--//
const findDist = (s,f) => {
  return s/2/(Math.tan(f*(Math.PI/180)/2))+s/2
}
//--resize the camera and change aspect ration to fit the screen--//
camera.resize = () => {
  renderer.setSize(window.innerWidth,window.innerHeight);
  camera.aspect = window.innerWidth/window.innerHeight;
  camera.zoom = camera.aspect<=1?camera.aspect:1;
  camera.updateProjectionMatrix();
}
window.addEventListener("resize",camera.resize);
camera.resize();
camera.position.z = findDist(32,camera.fov);

Also if you use this in your code and need to customize zoom you must use a seperate variable for the zoom and apply it in the resize function

1 Like