How to increase perspective without stretching the foreground in three.js

Question

I have a three.js script with a textured floor plane that needs a very specific perspective to align with a static two-dimensional overlay

My problem is that the more I increase the FOV of the camera, the better for the prospect, the more I have in the foreground, and I do not want this. It seems that I need a very high FOV (~ 120-150) for the texture to follow the wall, and it is so high that the camera shows things located behind it. I need to move the camera almost to the center of the stage to show the entire floor, and this is simply wrong. How can I tune this scene to get the right perspective without distortion?

: http://warriorhut.net/testing/shapes/backend/room/view.basic.php

:

var WIDTH = 1024;
var HEIGHT = 683;
var FOV = 140; // Increases perspective as it goes higher but also distortion

camera =  new THREE.PerspectiveCamera(FOV, WIDTH/HEIGHT, .1, 3000);

camera.position.x = 0;
camera.position.y = 200;
camera.position.z = 0;  
//camera.lookAt(scene.position);
camera.lookAt(new THREE.Vector3( 0, 100, -400 )); // look at the back of the room
camera.updateProjectionMatrix();

Answer 1

. , , , . , .

. . :

, , . , , , .

? 0,022 (15 ) . :

pitch = arctan(2 * tan(vfov/2) * 0.022)

. 0,010 , .

yaw = arctan(2 * tan(vfov/2) * -0.010)

three.js, :

var FOV = 75;

[...]

camera.position.x = 0;
camera.position.y = 200;
camera.position.z = 512;

var lookTarget = new THREE.Vector3().copy(camera.position);
var tanScale = 2 * Math.tan(FOV/2 * Math.PI/180);
lookTarget.x += -0.010 * tanScale;
lookTarget.y +=  0.022 * tanScale;
lookTarget.z += -1;
camera.lookAt(lookTarget);

camera.updateProjectionMatrix();

( Z) , ( ). FOV 75 (- ), :

, , , . , , . , , , - .

Answer 2

. , , FOV

var FOV = 100;
camera.position.x = -100;
camera.position.y = 540;
camera.position.z = 3500;   // Moved further back
//camera.lookAt(scene.position);
camera.lookAt(new THREE.Vector3( 0, 590, -1000 )); // look at the back of the room AND TILT UPWARDS!

Answer 3

, , (, , lookAt. . Open GL . , . , FOV .

Webgl, , , http://stemkoski.imtqy.com/Three.js/Chase-Camera.html , .

, , :

     if(typeof fc == "undefined") fc=0;
      var delta =0.02;
      var y=object.rotation.y;
      var dir=object.rotation.y-fc;
     var fc = THREE.Math.clamp( fc + 2 * delta * dir, y-control.followRadius, y+control.followRadius );
      var sn = Math.sin( fc);
     var cs = Math.cos(fc);
     camera.rotation.set(0,0,0);
     camera.position.x=object.position.x+(control.positionOffsetZ*sn);
     camera.position.y=object.position.y+control.positionOffsetY;   
     camera.position.z=object.position.z+(control.positionOffsetZ*cs);

     camera.lookAt(new THREE.Vector3(
         object.position.x+(control.targetOffsetZ*sn)
         ,object.position.y+control.targetOffsetY
         ,object.position.z+(control.targetOffsetZ*cs)
        ));
    var control = {"positionOffsetZ":-39,"positionOffsetY":3.2,"targetOffsetZ":5,"targetOffsetY":0,"followRadius":0.35

});

consider that the “object” is a fictitious invisible cube on which your camera is attached, and you move the same with the key. You can directly insert this piece of code into your wirk and the rest. If any question or doubt feel free to ask.