欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

threejs学习之透视相机与正交相机

程序员文章站 2022-05-23 14:00:23
...

three.js学习之透视相机与正交相机

透视相机和正交相机的原理都是将可视范围内的物体投影到一个平面,
我们在浏览器上所看到的就是这个投影平面,
这个平面也就是我们设置相机时,far属性所在的那一个横截面。

透视相机和正交相机的区别就是可视体的设置方法不同,
透视相机的可视体是一个四锥体,而正交相机是一个长方体;
透视相机由四锥体投影到一个平面时,相同大小的网格离上顶面越近投影到far横截面自然更大,这个原理类似于手电光投影到墙面;
正交相机用长方体进行投影的话,同样大小的网格无论位于矩形的哪一个位置,其投影到far横截面的大小总是一样的,类似于平行光投影到墙面。

透视相机可视体如下:
threejs学习之透视相机与正交相机
正交相机可视体如下:
threejs学习之透视相机与正交相机

下面是自己写的一个自适应正交相机的方法:
传入网格和正交相机,使用此方法可以使网格完整显示载相机视野内。

    function fitCamera(mesh, cameraOrtho) {   //传入网格和相机
        var box = new THREE.Box3();
        box.makeEmpty();
        box.expandByObject(mesh);

        var size = box.getSize(new THREE.Vector3());
        var cer = box.getCenter(new THREE.Vector3());

        var length = Math.sqrt(size.x * size.x + size.y ^ size.y + size.z ^ size.z);
        
        var aspect = window.in / window.inHegth
        var cameraPos = cameraOrtho.position ;
        cameraOrtho.left = -length * aspect ;
        cameraOrtho.right =  length * aspect ;
        cameraOrtho.top = length ;
        cameraOrtho.bottom = -length ;
        cameraPos.y =cer.y + length ;
        var distance = Math.sqrt(Math.pow((cameraPos.x - cer.x), 2) + Math.pow((cameraPos.y - cer.y), 2) + Math.pow((cameraPos.z - cer.z), 2));
        cameraOrtho.near = (distance - length) > 0.1 ? (distance - length):0.1;
        cameraOrtho.far = distance + length;
        cameraOrtho.zoom = 0.5;
        cameraOrtho.updateProjectionMatrix();
    }

欢迎评论交流!