zoukankan      html  css  js  c++  java
  • 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,如有侵权,请联系删除。

  • 相关阅读:
    Call KernelIoControl in user space in WINCE6.0
    HOW TO:手工删除OCS在AD中的池和其他属性
    关于新版Windows Server 2003 Administration Tools Pack
    关于SQL2008更新一则
    微软发布3款SQL INJECTION攻击检测工具
    HyperV RTM!
    OCS 2007 聊天记录查看工具 OCSMessage
    CoreConfigurator 图形化的 Server Core 配置管理工具
    OC 2007 ADM 管理模板和Live Meeting 2007 ADM 管理模板发布
    Office Communications Server 2007 R2 即将发布
  • 原文地址:https://www.cnblogs.com/hustshu/p/15248853.html
Copyright © 2011-2022 走看看