Cesium入门12 - Camera Modes - 相机模式

Cesium入门12 - Camera Modes - 相机模式

Cesium中文网:http://cesiumcn.org/ | 国内快速访问:http://cesium.coinidea.com/

为了展现我们的无人机飞行,让我们用相机模式进行实验。我们将保持简单的两个基本的相机模式,用户可以切换之间。

  • Free Mode : 默认相机控制。
  • Drone Mode : 让相机跟随无人机通过飞行在一个固定的距离。

自由模式不需要代码,因为它使用默认控件。至于无人机跟随模式,我们可以使用摄像机的内置实体跟踪功能来定位摄像机,并用偏移量定位无人机。这就使得相机即使在移动时也能从指定的实体中得到固定的偏移量。为了跟踪一个实体,我们简单地设置viewer.trackedEntity

要切换到自由相机模式,我们可以将viewer.trackedEntity实体设置为未定义,然后使用camera.flyTo()返回到我们的Home视角。

以下是相机模式的函数:

// Create a follow camera by tracking the drone entity
function setViewMode() {
    if (droneModeElement.checked) {
        viewer.trackedEntity = drone;
    } else {
        viewer.trackedEntity = undefined;
        viewer.scene.camera.flyTo(homeCameraView);
    }
}

为了把这个附加到HTML输入,我们可以附加这个函数来change事件到适当的元素上:

var freeModeElement = document.getElementById(‘freeMode‘);
var droneModeElement = document.getElementById(‘droneMode‘);

// Create a follow camera by tracking the drone entity
function setViewMode() {
    if (droneModeElement.checked) {
        viewer.trackedEntity = drone;
    } else {
        viewer.trackedEntity = undefined;
        viewer.scene.camera.flyTo(homeCameraView);
    }
}

freeModeElement.addEventListener(‘change‘, setCameraMode);
droneModeElement.addEventListener(‘change‘, setCameraMode);

最后,当用户双击实体时,实体会被自动跟踪。如果用户通过单击开始跟踪无人机,我们可以添加一些处理来自动更新UI。

viewer.trackedEntityChanged.addEventListener(function() {
    if (viewer.trackedEntity === drone) {
        freeModeElement.checked = false;
        droneModeElement.checked = true;
    }
});

这是我们的两个相机模式-我们现在可以自由切换到无人机相机视角,看起来像这样:

Cesium中文网交流QQ群:807482793

Cesium中文网:http://cesiumcn.org/ | 国内快速访问:http://cesium.coinidea.com/

原文地址:https://www.cnblogs.com/cesiumjs/p/9988278.html

时间: 2024-11-02 23:01:40

Cesium入门12 - Camera Modes - 相机模式的相关文章

HoloLens开发手记 - Unity之Locatable camera 使用相机

Enabling the capability for Photo Video Camera 启用相机能力 为了使用摄像头,我们必须启用WebCam能力. 在Unity中打开Player settings 展开Windows Store标签页 在"Publishing Settings > Capabilities"部分勾选WebCam能力 同一时刻只能执行一次相机操作.为了识别当前相机处在哪种模式下(拍照还是视频),你可以通过UnityEngine.VR.WSA.WebCam.

WMware 10 Ubuntu 12.04 进入Unity模式

/********************************************************************* * WMware 10 Ubuntu 12.04 进入Unity模式 * 说明: * Tony看到我在虚拟机中使用终端,于是教我这种Unity模式来提高那么 * 一点点效率. * * 2016-5-10 深圳 南山平山村 曾剑锋 ****************************************************************

设计模式之第12章-享元模式(Java实现)

设计模式之第12章-享元模式(Java实现) “怎么回事,竟然出现了OutOfMemory的错误.鱼哥,来帮我看看啊.”“有跟踪错误原因么?是内存泄露么?”“不是内存泄露啊,具体原因不知道啊.对了,有说新对象申请不到内存空间.”“这个原因么,我曾写过一篇博文:叫OutOfMemory简单分析.不过你的明显是因为代码问题,产生对象太多,导致内存被耗尽,正好一会有堂课,讲的正好能解决你的问题.”(嘿嘿,轮到我享元模式出场了~) 享元模式之自我介绍 我,享元模式乃是池技术中的重要实现方式,具体定义如下

Cesium入门11 - Interactivity - 交互性

Cesium入门11 - Interactivity - 交互性 Cesium中文网:http://cesiumcn.org/ | 国内快速访问:http://cesium.coinidea.com/ 最后,让我们添加一些鼠标交互.为了提高我们的geocache标记的可见性,当用户在标记上hovers时,我们可以改变它们的样式来突出显示. 为了实现这一点,我们将使用拾取pick,一种Cesium的特征,从3D场景中返回数据,在观看者画布上给出像素位置. 这里有以下几种不同的picking: Sc

cesium 入门开发系列地图鹰眼功能(附源码下载)

前言 cesium 入门开发系列环境知识点了解:cesium api文档介绍,详细介绍 cesium 每个类的函数以及属性等等cesium 在线例子 内容概览 cesium 结合 leaflet 实现鹰眼图 cesium 自身 api 实现鹰眼图 源代码 demo 下载 cesium 结合 leaflet 实现鹰眼图方式效果图如下 初始化 cesium function initialGlobeView() { Cesium.Ion.defaultAccessToken = 'eyJhbGciO

设计模式@第12章:组合模式

第12章:组合模式 一.看一个学校院系展示需求 编写程序展示一个学校院系结构:需求是这样,要在一个页面中展示出学校的院系组成,一个学校有多个学院, 一个学院有多个系.如图: ----------清华大学-------------- ----------计算机学院------------ 计算机科学与技术 软件工程 网络工程 ---------信息工程学院----------- 通信工程 信息工程 二.传统方案解决学校院系展示(类图) 传统方案解决学校院系展示存在的问题分析 将学院看做是学校的子类

(一)Python入门-6面向对象编程:12设计模式之工厂模式-单例模式

一:工厂模式实现 设计模式是面向对象语言特有的内容,是我们在面临某一类问题时候固定的做法,设计 模式有很多种,比较流行的是:GOF(Goup Of Four)23 种设计模式. 工厂模式实现了创建者和调用者的分离,使用专门的工厂类将选择实现类.创建对象进 行统一的管理和控制. [操作] #工厂模式实现 class CarFactory: def creatCar(self,brand): if brand == '奔驰': return Benz() elif brand == '宝马': re

Cesium的类-Camera

很多知识没办法完全按照类来,在一个应用功能的基础上,梳理Cesium的Api的类,不断学习更新一.Cesium的视角坐标系统scene.camera (一)坐标系统:Cartesian3:三维笛卡尔(直角)坐标系,地心为原点的xyz,例x=****m,y=****m,z==****mCartographic:经纬度及wgs84的高程来定位,例HeadingPitchRoll:在ENU(East-North-Up)坐标系中,相对坐标轴的(直接用来定位很少,一般用于camera相机位置设置,后面介绍

Unity3D Camera透视相机到正交相机插值

事实上效果并不怎么好,因为延迟光照下的很多效果不支持正交,许多后期效果会炸掉,需要酌情使用 通过对投影矩阵进行插值来实现 如果透视相机的远截面和正交相机的远截面差太多,插值时会很奇怪,需要注意. 效果: 代码: using UnityEngine; using System.Collections; public class ProjectionLerp : MonoBehaviour { [Range(0, 0.9f)] public float lerp; public float near