3d Three.js错觉：如何重新缩放和重新定位对象

重复发布

我想用透视图为对象创建一个眼睛错觉。我想显示对象的透视图，因为它应该是这样的。下面的链接中有一个简单的示例

中心对象比其他对象更小、更近，但在模拟结束时，它显示为与其他对象相同的大小

我手动计算了中心对象的大小和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();

var scene=new THREE.scene（）；
var摄像机=新的三视角摄像机（45，window.innerWidth/window.innerHeight，0.8100）
var renderer=new THREE.WebGLRenderer（）；
renderer.setSize（window.innerWidth、window.innerHeight）；
document.body.appendChild（renderer.doElement）；
摄像机位置x=5；
摄像机位置y=5；
//照相机。toOrthographic（）；
var多维数据集=[]；
var-defaultSize=1；
对于（变量y=0；y<3；y++）{
对于（变量x=0；x<3；x++）{
var几何=新的三种。球墨法（0.8,10,10）；
var material=新的三个.MeshNormalMaterial（）；
var cube=新的三个网格（几何体、材质）；
立方体位置x=（x%10）*2；
立方体位置y=（y%10）*2；
如果（x==1&&y==1）{
var tmpZ=15；/（Math.random（）*10）；
var newSize=0.26；
cube.scale.x=新闻大小；
cube.scale.y=新闻大小；
cube.scale.z=新闻大小；
立方体位置x+=2.25；
立方体位置y+=2.17；
立方体位置z=tmpZ；
控制台日志（tmpZ）；
}
场景.添加（立方体）；
立方体。推（立方体）；
}
}
摄像机位置y=10；
摄像机位置x=30；
摄像机位置z=20；
函数render（）{
请求动画帧（渲染）；
渲染器。渲染（场景、摄影机）；
对于（变量i=0；i5）camera.position.x-=0.1；
如果（摄像机位置y>5）摄像机位置y-=0.1；
摄像机。注视（场景。位置）；
}
render（）；

绘制了一些图像以便于理解。请检查以下图片：中心对象可以定位在从相机最终位置到“中心”的直线段上的任何点上。中心对象的比例必须等于（从摄影机最终位置到中心对象位置的距离）/（从摄影机最终位置到“中心”的距离）。