Why orthographic projection not working exactly while using CombinedCamera.js using Three.js?

Question

I've gone through the working live example of CombinedCamera and with inspiration I embedded combinedcamera in my work.

 camera = new THREE.CombinedCamera( width /2, height/2, 45, 0.1, 1000, -1000, 1000, 1000 );

But while using Perspective Camera, my application works fine:

But The same application, while using orthographic projection doesn't work at all and it looks so weird.

Whats the problem in my code? I want the orthographic projection in all x, y and z directions on the object. How to do that?

Answer 1

The width and height of the CombinedCamera orthographic projection is from the intersection of a plane mid-way from the near and far planes of the perspective projection. If your object is small but close to the camera, it'll be rendered very small as in your second image.

Your settings have 0.1, 1000 as the near and far planes, so it's attempting to frame an object ~500 units from the camera, which is much larger than your object.

You have a number of options:

1. Use setFov or setZoom when in orthographic mode to frame your object better.
2. Scale up your object and place the camera/object so that its centre lies mid way from the camera's near and far plane.
3. Modify the camera's near and far plane so that they more closely frame your scene - e.g. if your camera is 25 units from the center of the objects, set the near and far plane distances on the camera to 0.1, 50 - the midpoint will be ~25 units and will frame your objects as desired when switching modes.