javascript - How to increase perspective without stretching foreground in three.js -

i have three.js scene textured floor plane needs specific perspective align static 2d overlay

my problem more increase camera fov perspective need more foreground stretches , don't want that. seem need high fov (~ 120 - 150) make texture follow wall , high camera rendering things positioned behind it. need move camera center of scene show whole floor , feels wrong. how can adjust scene right perspective without distortion?

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

the relevant camera settings are:

var width = 1024; var height = 683; var fov = 140; // increases perspective goes higher 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 )); // @ of room camera.updateprojectionmatrix(); 

adding virtual object existing image requires matching original camera parameters closely possible. in case because image synthetic, ideally obtain parameters whoever generated it. otherwise can try infer of parameters taking measurements on image.

i'll make standard assumption of pinhole camera, , further assume optical axis @ center of image. parallel lines in scene meet @ vanishing point. in image can determine 1 vanishing point accuracy:

the parallel lines here parallel ground plane, means vanishing point on horizon. horizon below center of image, means camera pitched upwards.

how upwards? vanishing point 0.022 image heights (15 pixels) below center of image. can express indicated camera pitch in terms of vertical field of view:

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

we can determine yaw of camera respect parallel lines. vanishing point 0.010 image heights right of center camera yaws left.

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

to express in three.js application, modified camera configuration section of code this:

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(); 

i moved camera backwards (toward positive z) bit make of floor geometry visible (this doesn't change vanishing point of rendered geometry). changed fov 75 degrees (still quite wide angle view), , texture pattern automatically converges @ vanishing point less perspective distortion:

note can see end of floor geometry because assuming smaller field of view increases assumed depth of image, may need increase size of floor. can modify field of view adjust texture foreshortening , camera code should keep vanishing point in same place. don't believe there sufficient features in particular image let estimate actual focal length, it may possible in other images - in case deduce field of view well.