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/

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

  1. Cesium入门4 - 创建Cesium Viewer

    Cesium入门4 - 创建Cesium Viewer Cesium中文网:http://cesiumcn.org/ | 国内快速访问:http://cesium.coinidea.com/ 任何Ce ...

  2. Cesium入门9 - Loading and Styling Entities - 加载和样式化实体

    Cesium入门9 - Loading and Styling Entities - 加载和样式化实体 Cesium中文网:http://cesiumcn.org/ | 国内快速访问:http://c ...

  3. Cesium入门8 - Configuring the Scene - 配置视窗

    Cesium入门8 - Configuring the Scene - 配置视窗 Cesium中文网:http://cesiumcn.org/ | 国内快速访问:http://cesium.coini ...

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

    Enabling the capability for Photo Video Camera 启用相机能力 为了使用摄像头,我们必须启用WebCam能力. 在Unity中打开Player settin ...

  5. cesium 入门开发系列矢量瓦片加载展示(附源码下载)

    前言 cesium 入门开发系列环境知识点了解:cesium api文档介绍,详细介绍 cesium 每个类的函数以及属性等等cesium 在线例子 内容概览 cesium 实现矢量瓦片加载效果 源代 ...

  6. Cesium入门-3-官方完整实例

    实例核心代码 //资源访问令牌 Cesium token Cesium.Ion.defaultAccessToken='eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ ...

  7. cesium入门示例-测量工具

    作为cesium入门示例级别的最后一篇,参考cesium-长度测量和面积测量实现测量工具封装,修改了其中的距离测量函数,计算贴地距离,并对事件内部处理做了调整.包括贴地距离测量.面积测量.结果清除. ...

  8. Camera Calibration 相机标定

    Camera Calibration 相机标定 一.相机标定方法 在opencv中提供了一组函数用于实现相机的标定,标定返回的值包括:相机内参矩阵(fx fy xc yc).相机外参矩阵(R t)以及 ...

  9. Cesium入门7 - Adding Terrain - 添加地形

    Cesium入门7 - Adding Terrain - 添加地形 Cesium中文网:http://cesiumcn.org/ | 国内快速访问:http://cesium.coinidea.com ...

随机推荐

  1. TCP 长连接保活机制&HTTP长连接设置

    TCP KeepAlive Wireshark抓包分析机制 -------------------------------- 如上图所示,TCP保活报文总是成对出现,包括TCP保活探测报文和TCP保活 ...

  2. python requests库的简单运用

    python requests的简单运用 使用pycharm获取requests包 ctrl+alt+s Project:pythonProject pythoninterpreter 点+号搜索 使 ...

  3. JAVA实现QQ第三方登录

    首先在QQ互联: https://connect.qq.com/manage.html 申请账号,并且进行资料审核,同时创建应用(设置回调地址) 申请应用完后,会有app_ID.app_KEY等参数 ...

  4. JAVA使用经纬度通过腾讯地图API获取详细地址

    官方文档:https://lbs.qq.com/service/webService/webServiceGuide/webServiceGcoder package com.weixin.map; ...

  5. VS c/c++常用配置项

    VS2015 下面的配置,Vs是通用的 自己常用VS2015, 但其默认的一些设置不能满足我的日常. 比较熟悉c/c++, 以下配置仅适用c/c++ 设置方法: 工具-选项-文本编辑器-c/c++ 常 ...

  6. nim_duilib(5)之option

    introduction 更多控件用法,请参考 here 和 源码. 本文的代码基于这里 xml文件添加代码 基于上一篇, 继续向basic.xml中添加下面关于Option的代码. xml完整源码在 ...

  7. 【LeetCode】212. Word Search II 解题报告(C++)

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 前缀树 日期 题目地址:https://leetco ...

  8. 【LeetCode】495. Teemo Attacking 解题报告(Python & C++)

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 日期 题目地址:https://leetcode.c ...

  9. 【LeetCode】807. Max Increase to Keep City Skyline 解题报告(Python &C++)

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 日期 题目地址:https://leetcode.c ...

  10. MyEclipse编写jsp很卡的修改方法 (转载)

      原文来源   Post IP : 180.156.210.*       1,改默认编辑模式就可以了.将默认编辑器由"myeclipse visual jsp designer" ...