Cesium学习笔记（七）：Demo学习（自由控制飞行的飞机）[转]
https://blog.csdn.net/umgsoil/article/details/74923013#
这是官方的教程Demo，名字叫Use HeadingPitchRoll，顾名思义，就是教你用HeadingPitchRoll这个方法的，下面我们就来看一看这个Demo
首先先说一下，这个Demo是沙盒里面的，所以如果你想在本地运行的话需要改一下html
这里是html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<title>Hello World!</title>
<script src="../Build/Cesium/Cesium.js"></script>
<!-- 如果要用沙盒里的东西的话加上这个 -->
<script src="../Apps/Sandcastle/Sandcastle-header.js"></script>
<!-- 一定要加上这个css样式 -->
<link rel="stylesheet" href="Sandcastle/templates/bucket.css">
<style>
@import url(../Build/Cesium/Widgets/widgets.css);
</style>
</head>
<body>
<div id="cesiumContainer" class="fullSize"></div>
<div id="toolbar">
<!-- 这是Demo需要的侧边栏 -->
<table class="infoPanel">
<tbody>
<tr>
<td>Click on the 3D window then use the keyboard to change settings.</td>
</tr>
<tr>
<td>Heading: <span id="heading"></span>°</td>
</tr>
<tr>
<td>← to left/→ to right</td>
</tr>
<tr>
<td>Pitch: <span id="pitch"></span>°</td>
</tr>
<tr>
<td>↑ to up/↓ to down</td>
</tr>
<tr>
<td>roll: <span id="roll"></span>°</td>
</tr>
<tr>
<td>← + ⇧ left/→ + ⇧ right</td>
</tr>
<tr>
<td>Speed: <span id="speed"></span>m/s</td>
</tr>
<tr>
<td>↑ + ⇧ to speed up/↓ + ⇧ to speed down</td>
</tr>
<tr>
<td>following aircraft
<input id="fromBehind" type="checkbox">
</td>
</tr>
</tbody>
</table>
</div>
<script src="你的js文件"></script>
</body>
</html>
这是js代码
//飞机飞行
var canvas = viewer.canvas;
canvas.setAttribute('tabindex', '0'); // 将焦点放在画布上
//如果点击就获取画布焦点
canvas.addEventListener('click', function() {
canvas.focus();
});
canvas.focus();
//飞行路径的位置
var pathPosition = new Cesium.SampledPositionProperty();
//添加飞机飞行路径
var entityPath = viewer.entities.add({
position : pathPosition,
name : 'path',
path : {
show : true,
leadTime : 0,
trailTime : 60,
width : 10,
resolution : 1,
material : new Cesium.PolylineGlowMaterialProperty({
glowPower : 0.3,
color : Cesium.Color.PALEGOLDENROD
})
}
});
var camera = viewer.camera;
var controller = scene.screenSpaceCameraController;
var r = 0;
//中心点
var center = new Cesium.Cartesian3();
//机身模型的偏移参数
var hpRoll = new Cesium.HeadingPitchRoll();
//相机模型的偏移参数
var hpRange = new Cesium.HeadingPitchRange();
var speed = 10;
//默认按一下偏移3度
var deltaRadians = Cesium.Math.toRadians(3.0);
//飞机位置
var position = Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706, 5000.0);
//速度向量
var speedVector = new Cesium.Cartesian3();
//生成一个由两个参考系生成的矩阵
var fixedFrameTransform = Cesium.Transforms.localFrameToFixedFrameGenerator('north', 'west');
//添加模型
var planePrimitive = scene.primitives.add(Cesium.Model.fromGltf({
//这里需要把模型路径改下(如果你用的还是HelloWord.html的话就用这个,不是的话请自行修改)
url : '../Apps/SampleData/models/CesiumAir/Cesium_Air.glb',
modelMatrix : Cesium.Transforms.headingPitchRollToFixedFrame(position, hpRoll, Cesium.Ellipsoid.WGS84, fixedFrameTransform),
minimumPixelSize : 128
}));
//动画播放
planePrimitive.readyPromise.then(function(model) {
// 以半速循环动画
model.activeAnimations.addAll({
speedup : 0.5,
loop : Cesium.ModelAnimationLoop.REPEAT
});
//r=2*max(模型的半径，相机的最近距离)
r = 2.0 * Math.max(model.boundingSphere.radius, camera.frustum.near);
//镜头最近距离
controller.minimumZoomDistance = r * 0.5;
//计算center位置(也为下面的镜头跟随提供了center位置)
Cesium.Matrix4.multiplyByPoint(model.modelMatrix, model.boundingSphere.center, center);
//相机偏移角度
var heading = Cesium.Math.toRadians(230.0);
var pitch = Cesium.Math.toRadians(-20.0);
hpRange.heading = heading;
hpRange.pitch = pitch;
hpRange.range = r * 50.0;
//固定相机
camera.lookAt(center, hpRange);
});
//键盘监听
document.addEventListener('keydown', function(e) {
switch (e.keyCode) {
case 40:
if (e.shiftKey) {
// 按住shift加下箭头减速
speed = Math.max(--speed, 1);
} else {
// 直接按下箭头降低角度
hpRoll.pitch -= deltaRadians;
if (hpRoll.pitch < -Cesium.Math.TWO_PI) {
hpRoll.pitch += Cesium.Math.TWO_PI;
}
}
break;
case 38:
if (e.shiftKey) {
// 按住shift加上箭头加速
speed = Math.min(++speed, 100);
} else {
// 直接按上箭头抬高角度
hpRoll.pitch += deltaRadians;
if (hpRoll.pitch > Cesium.Math.TWO_PI) {
hpRoll.pitch -= Cesium.Math.TWO_PI;
}
}
break;
case 39:
if (e.shiftKey) {
// 飞机本身向右旋转
hpRoll.roll += deltaRadians;
if (hpRoll.roll > Cesium.Math.TWO_PI) {
hpRoll.roll -= Cesium.Math.TWO_PI;
}
} else {
// 向右飞行
hpRoll.heading += deltaRadians;
if (hpRoll.heading > Cesium.Math.TWO_PI) {
hpRoll.heading -= Cesium.Math.TWO_PI;
}
}
break;
case 37:
if (e.shiftKey) {
// 飞机本身向左旋转
hpRoll.roll -= deltaRadians;
if (hpRoll.roll < 0.0) {
hpRoll.roll += Cesium.Math.TWO_PI;
}
} else {
// 向左飞行
hpRoll.heading -= deltaRadians;
if (hpRoll.heading < 0.0) {
hpRoll.heading += Cesium.Math.TWO_PI;
}
}
break;
default:
}
});
var headingSpan = document.getElementById('heading');
var pitchSpan = document.getElementById('pitch');
var rollSpan = document.getElementById('roll');
var speedSpan = document.getElementById('speed');
var fromBehind = document.getElementById('fromBehind');
//给左边的通知栏更新数据同时刷新飞机位置(这里也是个1ms一次的回调)
viewer.scene.preRender.addEventListener(function(scene, time) {
headingSpan.innerHTML = Cesium.Math.toDegrees(hpRoll.heading).toFixed(1);
pitchSpan.innerHTML = Cesium.Math.toDegrees(hpRoll.pitch).toFixed(1);
rollSpan.innerHTML = Cesium.Math.toDegrees(hpRoll.roll).toFixed(1);
speedSpan.innerHTML = speed.toFixed(1);
//选择的笛卡尔分量Cartesian3.UNIT_X（x轴单位长度）乘以一个标量speed/10，得到速度向量speedVector
speedVector = Cesium.Cartesian3.multiplyByScalar(Cesium.Cartesian3.UNIT_X, speed / 10, speedVector);
//飞机的模型矩阵与速度向量speedVector相乘，得到position
position = Cesium.Matrix4.multiplyByPoint(planePrimitive.modelMatrix, speedVector, position);
//添加一个路径模型(就是白色的尾气)
pathPosition.addSample(Cesium.JulianDate.now(), position);
//飞机位置+旋转角度+地球+坐标矩阵=飞机模型矩阵
Cesium.Transforms.headingPitchRollToFixedFrame(position, hpRoll, Cesium.Ellipsoid.WGS84, fixedFrameTransform, planePrimitive.modelMatrix);
if (fromBehind.checked) {
// 镜头跟随
Cesium.Matrix4.multiplyByPoint(planePrimitive.modelMatrix, planePrimitive.boundingSphere.center, center);
hpRange.heading = hpRoll.heading;
hpRange.pitch = hpRoll.pitch;
camera.lookAt(center, hpRange);
}
});
如上就是这个Demo的源码了，具体运行我就不展示了（csdn上传不了这么大的gif），还是很有趣的
我觉得注释已经很详细了，就不多说了，不清楚或者发现错误的请留言，大家一起学习
---------------------
作者：simple-soul
来源：CSDN
原文：https://blog.csdn.net/umgsoil/article/details/74923013
版权声明：本文为博主原创文章，转载请附上博文链接！
Cesium学习笔记（七）：Demo学习（自由控制飞行的飞机）[转]的更多相关文章
- （转）Qt Model/View 学习笔记 (七)——Delegate类
Qt Model/View 学习笔记 (七) Delegate 类 概念 与MVC模式不同,model/view结构没有用于与用户交互的完全独立的组件.一般来讲, view负责把数据展示 给用户,也 ...
- STM32学习笔记（四）——串口控制LED（中断方式）
目录: 一.时钟使能,包括GPIO的时钟和串口的时钟使能 二.设置引脚复用映射 三.GPIO的初始化配置,注意要设置为复用模式 四.串口参数初始化配置 五.中断分组和中断优先级配置 六.设置串口中断类 ...
- go微服务框架kratos学习笔记七(kratos warden 负载均衡 balancer)
目录 go微服务框架kratos学习笔记七(kratos warden 负载均衡 balancer) demo demo server demo client 池 dao service p2c ro ...
- Learning ROS for Robotics Programming Second Edition学习笔记(七) indigo PCL xtion pro live
中文译著已经出版,详情请参考:http://blog.csdn.net/ZhangRelay/article/category/6506865 Learning ROS forRobotics Pro ...
- Typescript 学习笔记七：泛型
中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...
- python3.4学习笔记(七) 学习网站博客推荐
python3.4学习笔记(七) 学习网站博客推荐 深入 Python 3http://sebug.net/paper/books/dive-into-python3/<深入 Python 3& ...
- Go语言学习笔记七： 函数
Go语言学习笔记七: 函数 Go语言有函数还有方法,神奇不.这有点像python了. 函数定义 func function_name( [parameter list] ) [return_types ...
- iOS 学习笔记七 【博爱手把手教你使用2016年gitHub Mac客户端】
iOS 学习笔记七 [博爱手把手教你使用gitHub客户端] 第一步:首先下载git客户端 链接:https://desktop.github.com 第二步:fork 大神的代码[这里以我的代码为例 ...
- 【opencv学习笔记七】访问图像中的像素与图像亮度对比度调整
今天我们来看一下如何访问图像的像素,以及如何改变图像的亮度与对比度. 在之前我们先来看一下图像矩阵数据的排列方式.我们以一个简单的矩阵来说明: 对单通道图像排列如下: 对于双通道图像排列如下: 那么对 ...
随机推荐
- 【Ray Tracing in One Weekend 超详解】 光线追踪1-9 景深
今天我们来学最后一章 Chapter11:Defocus Blur Preface 散焦模糊 也称 景深 首先,我们来了解一下散焦模糊,我们在真实相机中散焦模糊的原因是因为它们需要一个大圈(而不仅仅是 ...
- 循序渐进学.Net Core Web Api开发系列【5】：文件上传
系列目录 循序渐进学.Net Core Web Api开发系列目录 本系列涉及到的源码下载地址:https://github.com/seabluescn/Blog_WebApi 一.概述 本篇介绍通 ...
- 【BZOJ 3620】 3620: 似乎在梦中见过的样子 （KMP）
3620: 似乎在梦中见过的样子 Time Limit: 15 Sec Memory Limit: 128 MBSubmit: 755 Solved: 445 Description “Madok ...
- Codeforces.862D.Mahmoud and Ehab and the binary string(交互 二分)
题目链接 \(Description\) 有一个长为\(n\)的二进制串,保证\(01\)都存在.你可以询问不超过\(15\)次,每次询问你给出一个长为\(n\)的二进制串,交互库会返回你的串和目标串 ...
- 吴恩达-coursera-机器学习-week8
十三.聚类(Clustering) 13.1 无监督学习:简介 13.2 K-均值算法 13.3 优化目标 13.4 随机初始化 13.5 选择聚类数 十四.降维(Dimensionality Red ...
- Tesseract OCR简单实用介绍
做字符识别,不能不了解google的Tesseract-OCR,但是如何在自己的工程中使用其API倒是语焉不详,官网上倒是很详尽地也很啰嗦地介绍如何重新编译生成适合自己平台的lib和dll,经过近些天 ...
- java并发基础（四）--- 取消与中断
<java并发编程实战>的第7章是任务的取消与关闭.我觉得这一章和第6章任务执行同样重要,一个在行为良好的软件和勉强运行的软件之间的最主要的区别就是,行为良好的软件能很完善的处理失败.关闭 ...
- 玩转ptrace(转)
下面是转帖的内容,写的很详细.但是不同的linux发行版中头文件的路径和名称并不相同.如在某些发行版中<linux/user.h>就不存在,其中定义的变量出现在<asm/ptrace ...
- C#如何直接调用非托管代码
C#如何直接调用非托管代码,通常有2种方法: 1． 直接调用从 DLL 导出的函数. 2． 调用 COM 对象上的接口方法 我主要讨论从dll中导出函数,基本步骤如下: 1．使用 C# 关键字 s ...
- Dapper Miser implementation of CMSIS-DAP, MC HCK as SWD Adapter
Dapper Miser In late 2013, I created a functional implementation of CMSIS-DAP that runs in a low cos ...