简体   繁体   English

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

[英]THREE.js fit Orthographic camera to scene

I've searched through many related questions on stack overflow, but I couldn't quite find the answer to this problem. 我已经搜索了许多有关堆栈溢出的相关问题,但找不到该问题的答案。

I have a big, dynamic group of Object3D's in my scene, with an orthographic camera looking at them head-on. 我的场景中有一个很大的,动态的Object3D组,正射摄影机正对着它们。

I want to have a simple function which, when called, will simply match the top/left/bottom/right/zoom properties of the Orthographic camera to properly fit the Object3D group. 我希望有一个简单的函数,当调用该函数时,它将仅与正交摄影机的top / left / bottom / right / zoom属性匹配,以正确适合Object3D组。

I've tried all kinds of things, but none of my code is worth posting. 我已经尝试过各种方法,但是我的代码都不值得发表。 I need to look at this from a whole new angle (pun intended). 我需要从一个全新的角度来看这个(双关语意)。 I have found various other answers which discuss changing the fov of the camera, once you know the distance from the face of bounding box of the group to the camera, but I don't know how to implement that with an orthographic camera, since (as far as I've tried) the fov property doesn't work with it (maybe it actually does, I just don't know). 一旦知道了群组边界框的表面到相机的距离,我发现了其他各种讨论如何更改相机视场的答案,但是我不知道如何使用正交摄影机来实现,据我尝试)fov属性不能使用它(也许实际上可以,我只是不知道)。

So I don't particularly like asking for code, but nevertheless I would like a function which would automatically adjsut the appropriate properties of the Orthographic camera to fit the object passed to it as a parameter, for example: 因此,我并不特别喜欢询问代码,但是我仍然想要一个可以自动调整正交摄影机的适当属性以适合作为参数传递给它的对象的函数,例如:

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

Calculate the bounding box of your mesh and apply this code. 计算网格的边界框并应用此代码。 This works for me 这对我有用

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

Setting the top/left/bottom/right of the orthographic camera once you have the bounding box should not be a problem. 一旦有了边界框,就可以设置正交摄影机的顶部/左侧/底部/右侧。 Just take the half lengths of the bounding box. 只需取边界框的一半长度即可。

The zoom is the issue and for that you can confine your scene in a unit cube by scaling up or down your scene by the appropriate amount depending on your bounding box size. 缩放是一个问题,为此,您可以通过根据边界框的大小将场景放大或缩小适当的大小,从而将场景限制在单位立方体中。 Then you dont have to worry about the zoom and the above top/left/bottom/right values become 0.5/0.5/-0.5/-0.5. 然后,您不必担心缩放,并且上面的上/左/下/右值变为0.5 / 0.5 / -0.5 / -0.5。

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

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