繁体   English   中英

THREE.js使正交摄影机适合场景

[英]THREE.js fit Orthographic camera to scene

我已经搜索了许多有关堆栈溢出的相关问题,但找不到该问题的答案。

我的场景中有一个很大的,动态的Object3D组,正射摄影机正对着它们。

我希望有一个简单的函数,当调用该函数时,它将仅与正交摄影机的top / left / bottom / right / zoom属性匹配,以正确适合Object3D组。

我已经尝试过各种方法,但是我的代码都不值得发表。 我需要从一个全新的角度来看这个(双关语意)。 一旦知道了群组边界框的表面到相机的距离,我发现了其他各种讨论如何更改相机视场的答案,但是我不知道如何使用正交摄影机来实现,据我尝试)fov属性不能使用它(也许实际上可以,我只是不知道)。

因此,我并不特别喜欢询问代码,但是我仍然想要一个可以自动调整正交摄影机的适当属性以适合作为参数传递给它的对象的函数,例如:

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

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

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

一旦有了边界框,就可以设置正交摄影机的顶部/左侧/底部/右侧。 只需取边界框的一半长度即可。

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

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM