3d - Three.js イリュージョン: オブジェクトを再スケーリングおよび再配置する方法

Question

重複投稿 は、既知の開始点、終了点、距離の線に沿ってポイントする式を示しています

オブジェクトの透視図で目の錯覚を作成したいと考えています。オブジェクトのパースペクティブをあるべき姿で表示したい。次のリンクに簡単な例があります。

http://jsfiddle.net/omerfarukz/32TLZ/6/

中央のオブジェクトは他のオブジェクトよりも小さく、近くにありますが、シミュレーションの最後には他のオブジェクトと同じサイズに見えます。

中央のオブジェクトのサイズと z 座標を手動で計算しました。私の質問は: 中央オブジェクトのサイズと z 座標をプログラムで計算する方法は?

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.8, 100)

var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

camera.position.x = 5;
camera.position.y = 5;
//camera.toOrthographic();

var cubes = [];

var defaultSize = 1;
for (var y = 0; y < 3; y++) {
    for (var x = 0; x < 3; x++) {
        var geometry = new THREE.SphereGeometry(0.8, 10, 10);
        var material = new THREE.MeshNormalMaterial();

        var cube = new THREE.Mesh(geometry, material);
        cube.position.x = (x % 10) * 2;
        cube.position.y = (y % 10) * 2;

        if (x == 1 && y == 1) {
            var tmpZ = 15; //(Math.random() * 10);

            var newSize = 0.26;
            cube.scale.x = newSize;
            cube.scale.y = newSize;
            cube.scale.z = newSize;

            cube.position.x += 2.25;
            cube.position.y += 2.17;

            cube.position.z = tmpZ;
            console.log(tmpZ);
        }



        scene.add(cube);

        cubes.push(cube);
    }
}

camera.position.y = 10;
camera.position.x = 30;
camera.position.z = 20;


function render() {
    requestAnimationFrame(render);
    renderer.render(scene, camera);

    for (var i = 0; i < cubes.length; i++) {
        //cubes[i].rotation.x += 0.001;
        //cubes[i].rotation.y += 0.001;
    }

    if (camera.position.x > 5) camera.position.x -= 0.1;
    if (camera.position.y > 5) camera.position.y -= 0.1;

    camera.lookAt(scene.position);

}
render();