THREE.js适合正交相机到场景

时间:2015-08-13 02:07:07

标签: javascript camera three.js

我已经搜索了很多关于堆栈溢出的相关问题,但我无法找到这个问题的答案。

我的场景中有一个庞大而充满活力的Object3D组,正面照相机正面看着它们。

我希望有一个简单的功能,在调用时,它将简单地匹配正交相机的上/左/下/右/缩放属性,以正确适合Object3D组。

我尝试了各种各样的事情,但我的代码都没有值得张贴。我需要从一个全新的角度来看这个(双关语)。我已经找到了各种其他的答案,一旦你知道从组的边界框到相机的面部的距离,就可以讨论改变相机的fov,但我不知道如何使用正交相机实现这一点,因为(据我已经尝试过)fov属性不适用它(也许它实际上是这样,我只是不知道)。

所以我并不特别喜欢要求代码,但是我想要一个能够自动调整正交相机的相应属性以适合作为参数传递给它的对象的函数,例如:

function fitOrthographicCameraToObject3DGroup(group) {
    //implement here (my question)
}

2 个答案:

答案 0 :(得分:2)

计算网格的边界框并应用此代码。 这对我有用

        var camera = new THREE.OrthographicCamera(container.offsetWidth / -2, container.offsetWidth / 2, container.offsetHeight / 2, container.offsetHeight / -2, 100, 100000);

        //For centering the meshGroup
            var box = new THREE.Box3().setFromObject(meshGroup);
            box.center(meshGroup.position);
            meshGroup.localToWorld(box);
            meshGroup.position.multiplyScalar(-1);

       //For fitting the object to the screen when using orthographic camera

           Camera.zoom = Math.min(container.offsetWidth / (box.max.x - box.min.x),
                container.offsetHeight / (box.max.y - box.min.y)) * 0.4;
           Camera.updateProjectionMatrix();
           Camera.updateMatrix();

答案 1 :(得分:1)

一旦有了边界框,设置正交相机的上/左/下/右应该不是问题。只需占用边界框的一半长度。

缩放是个问题,您可以根据边界框大小,通过适当的放大或缩小场景,将场景限制在单位立方体中。然后您不必担心变焦,上面的上/左/下/右值变为0.5 / 0.5 / -0.5 / -0.5。