THREE实战2_正交投影相机与透视相机

举报
yma16 发表于 2023/07/22 16:40:34 2023/07/22
【摘要】 正交投影相机特点:看见物体的远近高低比例都是相同就像maya中的三视图。看一下鄙人以前做的一个简单模型伞。侧视图俯视图正交投影构造函数OrthographicCameraOrthographicCamera( left, right, top, bottom, near, far );参数含义left左平面距离相机中心的垂直距离right右平面距离相机中心的垂直距离top顶平面距离相机中心...

正交投影相机

特点:看见物体的远近高低比例都是相同
就像maya中的三视图。
看一下鄙人以前做的一个简单模型伞。

  • 侧视图

  • 俯视图

正交投影构造函数OrthographicCamera

OrthographicCamera( left, right, top, bottom, near, far );

参数 含义
left 左平面距离相机中心的垂直距离
right 右平面距离相机中心的垂直距离
top 顶平面距离相机中心的垂直距离
bottom 低平面距离相机中心的垂直位置
near 近平面距离相机中心的垂直位置
far 远平面距离相机中心的垂直距离

maya的顶视图相机,相机中心就是它的焦点位置。

透视相机

  • 透视图

透视相机就像我们的人眼
image.png

透视投影相机的构造函数PerspectiveCamera

PerspectiveCamera(fov,aspect,near,far);
参数 含义
fov 视角
aspect 纵横比
near 近平面
far 原平面

maya的透视相机
image.png

THREE实战

前期的工作重构代码:

        <script>
        //场景的物体
        var cube=null,mesh=null,scene=null;
        function initObject() {
            var geometry = new THREE.CubeGeometry(300,300,300,);//正方体
            //白色反射所有光线,利于检测灯光
            var material = new THREE.MeshLambertMaterial( { color:0xFFFFFF} );//白色
            mesh = new THREE.Mesh( geometry,material);
            mesh.position = new THREE.Vector3(0,0,0);
            scene.add(mesh);
        }
        //灯光
        function initLight() {
            light_direction=new THREE.DirectionalLight(0x0000FF,1);//方向光蓝色
            light_direction.position.set(10,20,6);
        }
        //函数入口
        function threeStart() {
            initThree();
            initCamera();
            initScene();
            initLight();
            initObject();
            animation();
        }
        // 循环渲染
        function animation()
        {
            renderer.render(scene, camera);
            requestAnimationFrame(animation);//递归调用
        }
        </script>
<body onload="threeStart();">
<div id="canvas-frame"></div>
</body>

case1:正交投影相机的使用

相机中心视为原点,left与bottom为负值

        //正交投影相机
        function initCamera() {
        var camera;
        camera=new THREE.OrthographicCamera(-width/2,width/2,height/2,-height/2,1,1000);
        camera.position.x = 0;
        camera.position.y = 0;
        camera.position.z = 700;

        camera.up.x = 0;//相机朝向位置
        camera.up.y = 1;
        camera.up.z = 0;
        camera.lookAt(new THREE.Vector3(0,0,0));
        }

image.png

调整左侧距离left=-width时
image.png

case2:透视相机的使用

        //透视相机45视角,屏幕纵横比,1-1000的距离区间
        function initCamera() {
        var camera;
        camera = new THREE.PerspectiveCamera(45, width/height, 1, 1000);
        camera.position.x = 0;
        camera.position.y = 0;
        camera.up.x = 0;//相机朝向位置
        camera.up.y = 1;
        camera.up.z = 0;
        camera.lookAt(new THREE.Vector3(0,0,0));
        }

image.png

调整视角120度,视角0-180度之间看到的物体会越来越小
image.png

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。