学习threejs,PerspectiveCamera透视相机和OrthographicCamera正交相机对比

👨‍⚕️ 主页: gis分享者

👨‍⚕️ 感谢各位大佬 点赞👍 收藏⭐ 留言📝 加关注✅!

👨‍⚕️ 收录于专栏:threejs gis工程师

文章目录


一、🍀前言

本文详细介绍如何基于threejs在三维场景中PerspectiveCamera透视相机和OrthographicCamera正交相机进行对比,亲测可用。希望能帮助到您。一起学习,加油!加油!

1.1 ☘️THREE.PerspectiveCamera透视相机

THREE.PerspectiveCamera这一投影模式被用来模拟人眼所看到的景象,它是3D场景的渲染中使用得最普遍的投影模式。
构造函数:

PerspectiveCamera( fov : Number, aspect : Number, near : Number, far : Number )

fov --- 摄像机视锥体垂直视野角度

aspect --- 摄像机视锥体长宽比

near --- 摄像机视锥体近端面

far --- 摄像机视锥体远端面

这些参数一起定义了摄像机的viewing frustum(视锥体)。
属性:

方法:

1.2 ☘️THREE.OrthographicCamera正交相机

THREE.OrthographicCamera正交相机在这种投影模式下,无论物体距离相机距离远或者近,在最终渲染的图片中物体的大小都保持不变。

这对于渲染2D场景或者UI元素是非常有用的。
构造函数:

OrthographicCamera( left : Number, right : Number, top : Number, bottom : Number, near : Number, far : Number )

left --- 摄像机视锥体左侧面。

right --- 摄像机视锥体右侧面。

top --- 摄像机视锥体上侧面。

bottom --- 摄像机视锥体下侧面。

near --- 摄像机视锥体近端面。

far --- 摄像机视锥体远端面。

这些参数一起定义了摄像机的viewing frustum(视锥体)。
属性:

方法:

二、🍀PerspectiveCamera透视相机和OrthographicCamera正交相机对比

1. ☘️实现思路

  • 1、初始化renderer渲染器
  • 2、初始化Scene三维场景scene。
  • 3、初始化PerspectiveCamera透视相机camera,定义相机位置 camera.position。
  • 4、初始化THREE.AmbientLight环境光源,scene场景加入环境光源。创建THREE.DirectionalLight平行光源directionalLight,设置平行光源位置,scene场景加入平行光源。
  • 5、加载几何模型:创建THREE.PlaneGeometry平面几何体planeGeometry,创建THREE.MeshLambertMaterial漫反射材质planeMaterial,传入参数planeGeometry和planeMaterial创建平面几何体网格对象plane,设置plane投影,设置plane的位置和旋转角度,场景scene中加入plane。在plane上循环创建立方体网格对象cube,将plane铺满,具体代码参考代码样例。
  • 6、加入gui控制,实现PerspectiveCamera透视相机和OrthographicCamera正交相机的切换,进行效果对比。加入stats监控器,监控帧数信息。

2. ☘️代码样例

html 复制代码
<!DOCTYPE html>

<html>

<head>
    <title>PerspectiveCamera透视相机和OrthographicCamera正交相机对比</title>
    <script type="text/javascript" src="../libs/three.js"></script>
    <script type="text/javascript" src="../libs/stats.js"></script>
    <script type="text/javascript" src="../libs/dat.gui.js"></script>
    <style>
        body {
            /* set margin to 0 and overflow to hidden, to go fullscreen */
            margin: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>

<div id="Stats-output">
</div>
<!-- Div which will hold the Output -->
<div id="WebGL-output">
</div>

<!-- Javascript code that runs our Three.js examples -->
<script type="text/javascript">

    // once everything is loaded, we run our Three.js stuff.
    function init() {

        var stats = initStats();

        // create a scene, that will hold all our elements such as objects, cameras and lights.
        var scene = new THREE.Scene();

        // create a camera, which defines where we're looking at.
        var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
        camera.position.x = 120;
        camera.position.y = 60;
        camera.position.z = 180;

        // create a render and set the size
        var renderer = new THREE.WebGLRenderer();

        renderer.setClearColor(new THREE.Color(0xEEEEEE, 1.0));
        renderer.setSize(window.innerWidth, window.innerHeight);

        // create the ground plane
        var planeGeometry = new THREE.PlaneGeometry(180, 180);
        var planeMaterial = new THREE.MeshLambertMaterial({color: 0xffffff});
        var plane = new THREE.Mesh(planeGeometry, planeMaterial);


        // rotate and position the plane
        plane.rotation.x = -0.5 * Math.PI;
        plane.position.x = 0;
        plane.position.y = 0;
        plane.position.z = 0;

        // add the plane to the scene
        scene.add(plane);

        var cubeGeometry = new THREE.BoxGeometry(4, 4, 4);

        for (var j = 0; j < (planeGeometry.parameters.height / 5); j++) {
            for (var i = 0; i < planeGeometry.parameters.width / 5; i++) {
                var rnd = Math.random() * 0.75 + 0.25;
                var cubeMaterial = new THREE.MeshLambertMaterial();
                cubeMaterial.color = new THREE.Color(rnd, 0, 0);
                var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
                cube.position.z = -((planeGeometry.parameters.height) / 2) + 2 + (j * 5);
                cube.position.x = -((planeGeometry.parameters.width) / 2) + 2 + (i * 5);
                cube.position.y = 2;
                scene.add(cube);
            }
        }


        var directionalLight = new THREE.DirectionalLight(0xffffff, 0.7);
        directionalLight.position.set(-20, 40, 60);
        scene.add(directionalLight);


        // add subtle ambient lighting
        var ambientLight = new THREE.AmbientLight(0x292929);
        scene.add(ambientLight);

        // add the output of the renderer to the html element
        document.getElementById("WebGL-output").appendChild(renderer.domElement);

        // call the render function
        var step = 0;

        var controls = new function () {
            this.perspective = "Perspective";
            this.switchCamera = function () {
                if (camera instanceof THREE.PerspectiveCamera) {
                    camera = new THREE.OrthographicCamera(window.innerWidth / -16, window.innerWidth / 16, window.innerHeight / 16, window.innerHeight / -16, -200, 500);
                    camera.position.x = 120;
                    camera.position.y = 60;
                    camera.position.z = 180;
                    camera.lookAt(scene.position);
                    this.perspective = "Orthographic";
                } else {
                    camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
                    camera.position.x = 120;
                    camera.position.y = 60;
                    camera.position.z = 180;

                    camera.lookAt(scene.position);
                    this.perspective = "Perspective";
                }
            };
        };

        var gui = new dat.GUI();
        gui.add(controls, 'switchCamera');
        gui.add(controls, 'perspective').listen();

        // make sure that for the first time, the
        // camera is looking at the scene
        camera.lookAt(scene.position);
        render();

        function render() {

            stats.update();
            // render using requestAnimationFrame
            requestAnimationFrame(render);
            renderer.render(scene, camera);
        }

        function initStats() {

            var stats = new Stats();

            stats.setMode(0); // 0: fps, 1: ms

            // Align top-left
            stats.domElement.style.position = 'absolute';
            stats.domElement.style.left = '0px';
            stats.domElement.style.top = '0px';

            document.getElementById("Stats-output").appendChild(stats.domElement);

            return stats;
        }
    }
    window.onload = init


</script>
</body>
</html>

效果如下:

相关推荐
gis分享者4 天前
学习threejs,scene.overrideMaterial全局材质效果
threejs·全局材质·overridemater
我码玄黄5 天前
在THREEJS中加载3dtile模型
前端·javascript·3d·threejs
gis分享者14 天前
学习threejs,加载天地图
threejs·加载天地图
踏实探索16 天前
Three.js教程_02场景、相机与渲染器全面解析
开发语言·javascript·数码相机·threejs
gis分享者17 天前
学习threejs,实现配合使用WebWorker
多线程·threejs·webworker
AllBlue18 天前
threejs相机辅助对象cameraHelper
threejs
gis分享者20 天前
学习threejs,使用VideoTexture实现视频Video更新纹理
threejs·视频贴图·videotexture
gis分享者22 天前
学习threejs,通过设置纹理属性来修改纹理贴图的位置和大小
threejs·纹理贴图·位置和大小
gis分享者25 天前
学习threejs,使用设置normalMap法向量贴图创建更加细致的凹凸和褶皱
threejs·normalmap·法向量贴图