How to controll perspective distortion of THREE.PerspectiveCamera

Question

My goal is to render collada object and place it perfectly over image with this object.

Lets say that I have image that was rendered by v-ray renderer in 3ds max (green one) and collada object that I render by three js using perpective camera (red one).
The problem is I have bigger perspective distortion on rendered object than on image.
I saw that THREE.PerspectiveCamera has focus property that seems like what I'm looking for. But when I change it nothing happens.
THREEJS documentation says:

.focus

Object distance used for stereoscopy and depth-of-field effects. This parameter does not influence the projection matrix unless a StereoCamera is being used.

But I didn't found anything about StereoCamera in three js documentation.

Does anyone can help me cope with this?

Answer 1

It's better to change FOV of your PerspectiveCamera .

camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 3000);

So, the first parameter 60 is Field of view (FOV). The less value of this parameter, the less distortion you'll get, but the more you have to move your camera backwards to keep appropriate view of your scene or the more you have to scale your object down. Depends on what you want to get, play around with FOV of you camera and scaling of your object.