Cesium快速上手9-Camera和Scene中的其他函數使用

Camera

 viewer.camera 是快捷方式，訪問的是 viewer.scene.camera
camera.move... 相機平移
camera.look.. 相機旋轉

示例
http://localhost:8080/Apps/Sandcastle/index.html?src=Camera%20Tutorial.html&label=All

image.png

// disable the default event handlers  首先禁用原有默認操控方式
scene.screenSpaceCameraController.enableRotate = false;
scene.screenSpaceCameraController.enableTranslate = false;
scene.screenSpaceCameraController.enableZoom = false;
scene.screenSpaceCameraController.enableTilt = false;
scene.screenSpaceCameraController.enableLook = false;


。。。
//相機事件

viewer.clock.onTick.addEventListener(function(clock) {
    var camera = viewer.camera;

    if (flags.looking) {
        var width = canvas.clientWidth;
        var height = canvas.clientHeight;

        // Coordinate (0.0, 0.0) will be where the mouse was clicked.
        var x = (mousePosition.x - startMousePosition.x) / width;
        var y = -(mousePosition.y - startMousePosition.y) / height;

        var lookFactor = 0.05;
        camera.lookRight(x * lookFactor);
        camera.lookUp(y * lookFactor);
    }

    // Change movement speed based on the distance of the camera to the surface of the ellipsoid.
    var cameraHeight = ellipsoid.cartesianToCartographic(camera.position).height;
    var moveRate = cameraHeight / 100.0;

    if (flags.moveForward) {
        camera.moveForward(moveRate);
    }
    if (flags.moveBackward) {
        camera.moveBackward(moveRate);
    }
    if (flags.moveUp) {
        camera.moveUp(moveRate);
    }
    if (flags.moveDown) {
        camera.moveDown(moveRate);
    }
    if (flags.moveLeft) {
        camera.moveLeft(moveRate);
    }
    if (flags.moveRight) {
        camera.moveRight(moveRate);
    }
});

http://localhost:8080/Apps/Sandcastle/index.html?src=Camera.html&label=All

image.png

destination 目標點， 可以是一個點，也可是是一個區域
orientation 相機的目標點角度，默認北向
duration:
flyOverLongitude: 中途經過角度

// 監測相機移動事件
function cameraChanges() {
    Sandcastle.declare(cameraChanges);

    var i = 0;
    removeChanged = viewer.camera.changed.addEventListener(function(percentage) {
        ++i;
        cameraChanged.innerText = 'Camera Changed: ' + i + ', ' + percentage.toFixed(6);
        cameraChanged.style.display = 'block';
    });
}

function flyToHeadingPitchRoll() {
    Sandcastle.declare(flyToHeadingPitchRoll);
    viewer.camera.flyTo({
        destination : Cesium.Cartesian3.fromDegrees(-122.22, 46.12, 5000.0),
        orientation : {
            heading : Cesium.Math.toRadians(20.0),// 朝北為0，20度表示朝東20度
            pitch : Cesium.Math.toRadians(-35.0), //
            roll : 0.0
        }
    });
}

function flyToRectangle() {
    Sandcastle.declare(flyToRectangle);

    var west = -90.0;
    var south = 38.0;
    var east = -87.0;
    var north = 40.0;
    var rectangle = Cesium.Rectangle.fromDegrees(west, south, east, north);

    viewer.camera.flyTo({
        destination : rectangle
    });

    // Show the rectangle.  Not required; just for show.
    viewer.entities.add({
        rectangle : {
            coordinates : rectangle,
            fill : false,
            outline : true,
            outlineColor : Cesium.Color.WHITE
        }
    });
}

function setHeadingPitchRoll() {
    Sandcastle.declare(setHeadingPitchRoll);

    var camera = viewer.camera;
    camera.setView({
        destination : Cesium.Cartesian3.fromDegrees(-75.5847, 40.0397, 1000.0),
        orientation: {
            heading : -Cesium.Math.PI_OVER_TWO,
            pitch : -Cesium.Math.PI_OVER_FOUR,
            roll : 0.0
        }
    });
}

function losAngelesToTokyo(adjustPitch) {
    var camera = scene.camera;

    var tokyoOptions = {
        destination : Cesium.Cartesian3.fromDegrees(139.8148, 35.7142, 20000.0),
        orientation: {
            heading : Cesium.Math.toRadians(15.0),
            pitch : Cesium.Math.toRadians(-60),
            roll : 0.0
        },
        duration: 20,
        flyOverLongitude: Cesium.Math.toRadians(60.0) //控制飛行效果，途徑歐洲
    };

    var laOptions = {
        destination : Cesium.Cartesian3.fromDegrees(-117.729, 34.457, 10000.0),
        duration: 5,
        orientation: {
            heading : Cesium.Math.toRadians(-15.0),
            pitch : -Cesium.Math.PI_OVER_FOUR,
            roll : 0.0
        }
    };

    laOptions.complete = function() { //回調函數
        setTimeout(function() {
            camera.flyTo(tokyoOptions);
        }, 1000);
    };

    if (adjustPitch) {//飛起來時調整俯仰角達到垂直朝下看效果，越高度超過1000米，修改俯仰角朝正下
        tokyoOptions.pitchAdjustHeight = 1000;
        laOptions.pitchAdjustHeight = 1000;
    }

    camera.flyTo(laOptions);
}

camera.lookAtTransform 相當於 繞着參考坐標系transform的中心旋轉;
//若沒有自定義參考坐標系，默認的時單位矩陣，中心點在地球的正中心。

image.png

function setReferenceFrame() {
    Sandcastle.declare(setReferenceFrame);

    var center = Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883);
    var transform = Cesium.Transforms.eastNorthUpToFixedFrame(center);//確定transform坐標系

    //lookAtTransform 第一個參數確定參考點 相當於 繞着參考坐標系transform的中心旋轉
   //lookAtTransform 第二個參數是相機的位置
    // View in east-north-up frame
    var camera = viewer.camera;
    camera.constrainedAxis = Cesium.Cartesian3.UNIT_Z;
    camera.lookAtTransform(transform, new Cesium.Cartesian3(-120000.0, -120000.0, 120000.0));

    // Show reference frame.  Not required.
    referenceFramePrimitive = scene.primitives.add(new Cesium.DebugModelMatrixPrimitive({
        modelMatrix : transform,
        length : 100000.0
    }));
}

camera.position 相對於參考坐標系的坐標值Cartesian3，格式xyz
camera.positionWC 相對於地球中心點的坐標Cartesian3，格式  xyz
camera.positionCartographic... 坐標格式Cartographic 經緯度
camera.transform 相機參考坐標系

image.png

image.png

viewInICRF

效果是 相機不動，地球在動；實際上還是改變的相機的Transform，保持camera.position不變

//實現時camera.position始終不變，改變camera.Transform
function icrf(scene, time) {
    if (scene.mode !== Cesium.SceneMode.SCENE3D) {
        return;
    }

    var icrfToFixed = Cesium.Transforms.computeIcrfToFixedMatrix(time);
    if (Cesium.defined(icrfToFixed)) {
        var camera = viewer.camera;
        var offset = Cesium.Cartesian3.clone(camera.position);
        var transform = Cesium.Matrix4.fromRotationTranslation(icrfToFixed);
        camera.lookAtTransform(transform, offset);
    }
}


function viewInICRF() {
    Sandcastle.declare(viewInICRF);

    viewer.camera.flyHome(0);

    clock.multiplier = 3 * 60 * 60;
    scene.postUpdate.addEventListener(icrf);
    scene.globe.enableLighting = true;
}

Scene的api文檔查看

https://cesium.com/downloads/cesiumjs/releases/1.57/Build/Documentation/Scene.html?classFilter=Scene

• 1 調試類函數 debugShowFramesPerSecond/debugShowGlobeDepth/...

  

  image.png

• 2 WebGL渲染狀態 logarithmicDepthBuffer/mode
  當 Cesium 單個模型過長時，會遇到某些視角模型顯示不完整的問題

• 3 事件 preRender/postUpdate/postRender/preUpdate/renderError
  先更新再渲染,順序

• Scene#preUpdate

• Scene#postUpdate

• Scene#preRender

• Scene#postRender

• 4 環境對象 sun/moon/skyBox/...

  

  image.png

• 5 camera相機

• 6 后處理相關示例

調試用的函數 debugShowFramesPerSecond debugShowDepthFrustum debugShowGlobeDepth

cartesianToCanvasCoordinates(position, result) 三維場景坐標 轉換到屏幕坐標
clampToHeight
clampToHeightMostDetailed 獲取最精細的高度，精度更准確，操作時間更長；獲取完數據再求交；
pickPosition 在屏幕看到的資源里面求交，不需要再次請求數據；
drillPick 射線求交時具有穿透力，
pick 射線求交時沒有穿透力，

打開源碼的方式二

image.png

image.png

本文轉自 https://www.jianshu.com/p/c78c3927892c，如有侵權，請聯系刪除。