0

重复发布 什么公式指向已知起点、终点和距离

我想用物体的透视图创建一个眼睛错觉。我想展示物体的透视图。以下链接中有一个简单的示例。

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

0 回答 0