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，如有侵权，请联系删除。