javascript - How to switch between Perspective and Orthographic cameras keeping size of desired object

Question

I try to switch between Perspective and Orthographic cameras in my script. I want object on some depth to keep it's projection size. I gave up to understand the geometry...

Could you provide some link to a simple tutorial this is too complicated for me.

For object with position.z==0 i have:

perspCamera = new THREE.PerspectiveCamera(45, W / H, 1, 1000);
perspCamera.position.z = 100;

var S=Math.tan((45/180)*Math.PI)*100;
orthoCamera = new THREE.OrthographicCamera( -S, S, S, -S, 1, 1000 );

It is incorrect.

Update:

I get it I will post an answer with codepen link

Answer 1

The relation between Z-distance and size, at perspective projection is:

var fov_y   = 45;
var depht_s = Math.tan(fov_y/2.0 * Math.PI/180.0) * 2.0;

So the orthographic projection has to be (THREE.OrthographicCamera):

var Z      = 100;
var aspect = W / H;
var size_y = depht_s * Z;
var size_x = depht_s * Z * aspect; 

orthoCamera = new THREE.OrthographicCamera(
    -size_x/2,  size_x/2,
     size_y/2, -size_y/2,
     1, 1000 );