Cesium 入门教程(十一):Camera相机功能展示

文章目录

  • 一,Cesium 实际示例(含源代码)
      • 1,vue+cesium: 围绕一个固定点自动左右旋转
      • 2,vue+cesium: flyto一个具体的实体位置
      • 3,vue+cesium: flyto一个具体的点位置
      • 4,vue+cesium: 利用setView 动画定位到特定点和特定区域
      • 5,vue+cesium: lookAtTransform围绕一个固定点上下左右旋转查看
  • 二,Camera基础知识
      • 1. Camera 基本概念
      • 2. 常用操作方法
        • (1)设置相机位置和方向
        • (2)平滑飞行到目标位置
        • (3)围绕目标旋转(视角控制)
      • 3. 视锥体(Frustum)参数
      • 4. 相机控制事件
      • 5. 常用坐标转换
      • 6. 关键注意事项
  • 三、Cesium 入门教程 -系列文章列表

Cesium 中的 Camera(相机)是控制场景视图的核心组件,用于定义用户在 3D 场景中的观察位置、方向和视角。

一,Cesium 实际示例(含源代码)

1,vue+cesium: 围绕一个固定点自动左右旋转

https://dajianshi.blog.csdn.net/article/details/131106456

2,vue+cesium: flyto一个具体的实体位置

https://dajianshi.blog.csdn.net/article/details/131080372

3,vue+cesium: flyto一个具体的点位置

https://dajianshi.blog.csdn.net/article/details/131073605
在这里插入图片描述

4,vue+cesium: 利用setView 动画定位到特定点和特定区域

https://dajianshi.blog.csdn.net/article/details/145736119
在这里插入图片描述

5,vue+cesium: lookAtTransform围绕一个固定点上下左右旋转查看

https://dajianshi.blog.csdn.net/article/details/131106086

二,Camera基础知识

1. Camera 基本概念

  • 作用:决定场景中可见的区域,类似于现实世界中相机的取景范围。
  • 核心属性
    • position:相机在三维空间中的位置(Cartesian3 坐标)。
    • direction:相机的观察方向(单位向量)。
    • up:相机的上方向(单位向量,通常为 (0,0,1) 即垂直向上)。
    • frustum:视锥体参数(决定视野范围、近/远裁剪面等)。

2. 常用操作方法

(1)设置相机位置和方向
// 设置相机位置(WGS84经纬度:经度116°,纬度40°,高度1000米)
viewer.camera.setView({destination: Cesium.Cartesian3.fromDegrees(116, 40, 1000),orientation: {heading: Cesium.Math.toRadians(0),   // 水平旋转(0表示向北)pitch: Cesium.Math.toRadians(-30),   // 俯仰角(-90°为俯视,0°为平视)roll: 0                              // 翻滚角(0表示无倾斜)}
});
(2)平滑飞行到目标位置
// 平滑飞行到指定位置
viewer.camera.flyTo({destination: Cesium.Cartesian3.fromDegrees(116, 40, 5000),  // 目标位置duration: 3,                                               // 飞行时间(秒)orientation: {heading: Cesium.Math.toRadians(90),                      // 最终朝向(向东)pitch: Cesium.Math.toRadians(-45)}
});
(3)围绕目标旋转(视角控制)
// 围绕某个点旋转相机(例如围绕一个地标)
const center = Cesium.Cartesian3.fromDegrees(116, 40); // 旋转中心
viewer.camera.lookAt(center, new Cesium.Cartesian3(1000, 1000, 500) // 相机相对中心点的偏移量
);// 更新旋转角度(例如鼠标拖动时)
viewer.camera.lookAtTransform(Cesium.Transforms.eastNorthUpToFixedFrame(center),new Cesium.Cartesian3(1000, 1000, 500)
);

3. 视锥体(Frustum)参数

视锥体定义了相机可见的空间范围,常用参数:

  • fov:垂直视野角度(Field of View),默认 60°。
  • aspectRatio:宽高比(场景宽度/高度)。
  • near:近裁剪面距离(小于此值的物体不可见)。
  • far:远裁剪面距离(大于此值的物体不可见)。
// 自定义相机视锥体
viewer.camera.frustum.fov = Cesium.Math.toRadians(90); // 扩大视野到90°
viewer.camera.frustum.near = 1.0;                     // 近裁剪面1米
viewer.camera.frustum.far = 1000000.0;                // 远裁剪面1000公里

4. 相机控制事件

Cesium 提供了默认的相机交互(鼠标拖拽旋转、滚轮缩放、右键平移),也可自定义事件:

// 禁用默认相机控制
viewer.scene.screenSpaceCameraController.enableRotate = false; // 禁用旋转
viewer.scene.screenSpaceCameraController.enableZoom = false;   // 禁用缩放// 监听相机移动事件
viewer.camera.moveEnd.addEventListener(() => {console.log("相机移动结束,新位置:", viewer.camera.position);
});

5. 常用坐标转换

相机位置通常需要在不同坐标系统间转换:

// 笛卡尔坐标(Cartesian3)转经纬度高度
const cartographic = Cesium.Cartographic.fromCartesian(viewer.camera.position);
const longitude = Cesium.Math.toDegrees(cartographic.longitude); // 经度
const latitude = Cesium.Math.toDegrees(cartographic.latitude);   // 纬度
const height = cartographic.height;                              // 高度

6. 关键注意事项

  • 性能影响:相机的 far 值过大会导致渲染性能下降,应根据场景需求合理设置。
  • 视角限制:避免极端俯仰角(如接近 90°)可能导致的渲染异常。
  • 动画控制flyTo 方法可通过 complete 回调处理飞行结束后的逻辑。

通过灵活控制 Camera,可实现漫游、聚焦、环绕等多样化的场景浏览效果。

三、Cesium 入门教程 -系列文章列表

  • Cesium 入门教程(一):应该如何学习Cesium
  • Cesium 入门教程(二):界面的基础配置
  • Cesium 入门教程(三):加载不同的地图底图
  • Cesium 入门教程(四):利用entity显示图形
  • Cesium 入门教程(五):利用Primitive生成图形
  • Cesium 入门教程(六):不同的材质设置
  • Cesium 入门教程(七):加载、导出2D文件数据
  • Cesium 入门教程(八):加载3D瓦片及模型
  • Cesium 入门教程(九):通过鼠标绘制图形
  • Cesium 入门教程(十):利用shader、后处理重构图形
  • Cesium 入门教程(十一):camera相机功能展示
  • Cesium 入门教程(十二):时间动画实例
  • Cesium 入门教程(十三):粒子系统实例
  • Cesium 入门教程(十四):鼠标键盘交互

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.pswp.cn/news/920791.shtml
繁体地址,请注明出处:http://hk.pswp.cn/news/920791.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

go语言基本排序算法

package mainimport "fmt"func main() {BubbleSort()SelectSort()InsertSort()MergeSort()QuickSort()HeapSort()ShellSort() }//冒泡排序 func BubbleSort() {str : []int{9, 1, 5, 8, 3, 7, 4, 6, 2}for i : 0; i < len(str)-1; i {flag : falsefor j : len(str…

一步完成CalDAV账户同步,日历服务助力钉钉日历日程集中管理

在信息爆炸节奏飞快的今天&#xff0c;高效的管理时间已经成为我们工作和生活中的核心竞争力&#xff0c;复杂纷繁的日程安排&#xff0c;无处不在的提醒需求以及跨设备同步的困扰&#xff0c;这些问题仿佛都在呼唤着一个更智能、更便捷、更可靠的解决方案。 而华为日历App&am…

企业内部机密视频安全保护|如何防止企业内部机密视频泄露?

在企业数字化进程飞速发展的今天&#xff0c;视频内容已成为承载企业内部培训、战略会议、产品机密和核心技术的关键载体。一次意外的泄露&#xff0c;不仅可能导致知识产权流失&#xff0c;更会让企业声誉和市场竞争力遭受重创。面对无孔不入的安全威胁&#xff0c;企业该如何…

C# Deconstruct | 简化元组与对象的数据提取

官方文档&#xff1a;析构元组和其他类型 - C# | Microsoft Learn 标签&#xff1a;Deconstruct、Tuple、record、模式匹配 PS&#xff1a;record相关内容后续还会继续更新&#x1f504; 模式匹配可以查看我的另一篇&#x1f449;模式匹配 目录1. 概述2. 基本用法2.1 元组解…

R 语言 ComplexUpset 包实战:替代 Venn 图的高级集合可视化方案

摘要 在生物信息学、数据挖掘等领域的集合分析中,传统 Venn 图在多维度数据展示时存在信息拥挤、可读性差等问题。本文基于 R 语言的 ComplexUpset 包,以基因表达研究为场景,从包安装、数据准备到可视化实现,完整演示如何制作正刊级别的集合交集图,解决多条件下差异基因(…

​导游|基于SprinBoot+vue的在线预约导游系统

在线预约导游系统 基于SprinBootvue的在线预约导游系统 一、前言 二、系统设计 三、系统功能设计 前台功能实现 后台功能实现 管理员模块实现 导游模块实现 用户模块实现 四、数据库设计 五、核心代码 六、论文参考 七、最新计算机毕设选题推荐 八、源码获取&am…

SQL server 异常 出现错误 824

2025-08-27 01:36:37,324 ERROR c.z.i.w.DatabaseUtils [Scheduled-7] Error executeStoredProcedure SQL script: sp_RefreshDWDByDateFive警告: 在 08 27 2025 1:36AM 出现错误 824。请记录该错误和时间&#xff0c;并与您的系统管理员联系。 2025-08-27 01:36:37,332 ERROR …

制造业生产线连贯性动作识别系统开发

制造业生产线连贯性动作识别系统开发 第一部分&#xff1a;项目概述与理论基础 1.1 项目背景与意义 在现代智能制造环境中&#xff0c;尽管自动化程度不断提高&#xff0c;但人工操作仍然在复杂装配任务中扮演着不可替代的角色。研究表明&#xff0c;人机协作被视为打破传统人机…

什么是Jmeter? Jmeter工作原理是什么?

&#x1f345; 点击文末小卡片&#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;涨薪更快 第一篇 什么是 JMeter&#xff1f;JMeter 工作原理 1.1 什么是 JMeter Apache JMeter 是 Apache 组织开发的基于 Java 的压力测试工具。用于对软件做压力测试&a…

Linux网络基础1(一)之计算机网络背景

文章目录计算机网络背景网络发展认识 "协议"高小琴例子方言例子计算机网络背景 网络发展 独立模式: 计算机之间相互独立; 网络互联: 多台计算机连接在一起, 完成数据共享; 局域网LAN: 计算机数量更多了, 通过交换机和路由器连接在一起; 广域网WAN: 将远隔千里的计算…

如何在数学建模赛中实现模型创新?

模型创新性在国赛数学建模中&#xff0c;完备性是论文的基本要求&#xff0c;而创新性则是决定论文能否脱颖而出的关键因素。所谓创新&#xff0c;并不仅仅指提出完全新颖的数学理论&#xff0c;而是能够在已有方法的基础上&#xff0c;通过新的问题切入点、假设修正、模型优化…

【重磅发布】flutter_chen_updater-版本升级更新

Flutter Chen Updater 一个功能强大的Flutter应用内更新插件&#xff0c;支持Android APK自动下载、安装和iOS跳转App Store。 ✨ 特性 ✅ 跨平台支持: Android APK自动更新&#xff0c;iOS跳转App Store✅ 智能下载: 支持断点续传、文件校验、多重备用方案✅ 权限管理: 自动处…

docker 1分钟 快速搭建 redis 哨兵集群

使用 docker-compose 1 分钟搭建好 1主2从3哨兵的 redis 哨兵集群 目录结构 redis-sentinel-cluster ├── check_redis.sh ├── docker-compose.yml ├── redis │ └── redis.conf ├── sentinel │ └── sentinel.confdocker-compose.yml 配置 version: 3…

Git与DevOps实战:从版本控制到自动化部署

一、版本控制1.什么是版本控制&#xff1f;版本控制用于高效追踪和管理项目开发中的代码、配置及文档变更历史&#xff0c;确保团队成员始终使用正确版本&#xff0c;并支持版本回溯、差异比较和文件恢复。它能带来以下优势&#xff1a;通过历史记录保障数据安全与完整性&#…

大模型——利用RAG构建智能问答平台实战

利用RAG构建智能问答平台实战 目前公司的智能问答平台利用RAG技术构建,现给大家分享下通RAG技术构建智能问平台的具体流程和原理。 一、什么是RAG RAG是检索增强生成技术(Retrieval-Augmented Generation),目前是构建智能问答的重要技术。RAG相比传统的检索可以可以减少…

flume事务机制详解:保障数据可靠性的核心逻辑

flume事务机制详解&#xff1a;保障数据可靠性的核心逻辑 在数据采集过程中&#xff0c;“不丢数据、不重数据” 是核心需求。Flume 之所以能在分布式环境下保证数据可靠性&#xff0c;关键在于其内置的事务机制。Flume 通过在 “Source → Channel” 和 “Channel → Sink” …

第四十九天(springboot模版注入ThymeleafFreemarkerVelocity)

开发框架-SpringBoot 参考&#xff1a;Spring Boot 中文文档 新建一个spring Boot 项目&#xff0c;修改服务器url为 aliyun.com 不然没有与jdk8版本对应的java 选择一个spring web 库&#xff0c;点击创建即可 来到这个页面点击运行 启动的是8080端口&#xff0c;用127.0.0.1…

Spring MVC 九大组件源码深度剖析(六):HandlerExceptionResolver - 异常处理的艺术

文章目录一、异常处理的核心价值二、核心接口设计三、四大内置实现类源码解析1. ExceptionHandlerExceptionResolver&#xff08;现代异常处理核心&#xff09;2. ResponseStatusExceptionResolver&#xff08;HTTP状态码处理&#xff09;3. DefaultHandlerExceptionResolver&a…

MCP(Model Context Protocol,模型上下文协议)介绍

1. 背景 随着大语言模型&#xff08;LLM, Large Language Model&#xff09;的应用越来越广泛&#xff0c;一个核心问题逐渐凸显&#xff1a; 模型在对话或推理时&#xff0c;往往只能依赖有限上下文窗口。外部工具、知识库、应用接口如何统一接入模型&#xff0c;缺乏标准协议…

synchronized的锁对象 和 wait,notify的调用者之间的关系

谁调用了wait和notify方法&#xff0c;会决定这两个方法的控制范围吗&#xff1f;你的问题非常深入&#xff0c;涉及到 wait() 和 notify() 方法的控制范围和作用域。让我们详细分析一下&#xff1a;✅ 核心概念&#xff1a;控制范围由“锁对象”决定wait() 和 notify() 的控制…