Cesium 实战教程 - 三种方式（CZML、nodeTransformations）修改模型节点组件属性（比例、旋转、移动等）

Cesium 实战教程 - 三种方式（CZML、nodeTransformations）修改模型节点组件属性（比例、旋转、移动等）

    • 核心代码
    • 完整代码
    • 在线示例

关于 Cesium 设置模型组件的动作，之前是通过 CZML + articulations 来实现的，最近在官网发现一个示例，可以直接操作模型的 node 节点，来实现模型组件的动作。

本文介绍几种给模型组件设置动作的方法，包括 CZML articulations、CZML nodeTransformations 以及代码（model.nodeTransformations） 实现模型动作。

三种设置方式，效果是一致的，但是操作难度略有差别。

CZML articulations 需要先给模型添加自定义的关节动作，才可以通过代码来实现动作。

CZML nodeTransformations 相对比较方便，只需要知道节点（node）名称就可以实现动作，只是设置参数略有不同。

model.nodeTransformations 完全是由代码来实现的，比较自由，但是需要对相关代码比较熟悉。

三种方式各有优势，使用哪种，取决于项目需求。

本文包含核心代码、完整代码以及在线示例三部分。

核心代码

1. CZML articulations 关节动作

在这里插入图片描述

// 自定义动作，需要模型存在自定义关节属性
"articulations": {// 导弹组件向前移动// MoveZ 为 glTF 中自定义的关节名称"missiles MoveZ": {// 开始移动时刻"epoch": "2023-06-14T10:10:00Z",// 设置移动参数"number": [// 当前 epoch 时刻，第 0 秒的时，Z 轴移动的距离（米）0, 0,// 当前 epoch 时刻，第 300 秒的时，Z 轴移动的距离（米）// 与模型行进方向相反300, -60]},
}

详情请参考：Cesium 实战 - AGI_articulations 扩展：模型自定义关节动作

2. CZML nodeTransformations 实现节点动作

在这里插入图片描述

// 设置火焰显示隐藏
"nodeTransformations": {"SRB_Flame4": {// 旋转（按照模型设置的中心点）"scale": {"epoch": "2023-06-14T10:00:20Z",// 设置时刻与比例// 0 比例表示隐藏，1 比例表示显示"cartesian": [// 0 秒、x 比例、y 比例、z 比例0.0, 0, 0, 0,// 5 秒、x 比例、y 比例、z 比例5.0, 1.0, 1.0, 1.0,800.0, 1.0, 1.0, 1.0,1600.0, 1.0, 1.0, 1.0,],// nextTime: 500,},},
}

2. model.nodeTransformations 代码实现动作

// 获取模型实体const entity = dataSource.entities.getById("Vulcan");// 模型视角跟随viewer.trackedEntity = entity;console.log(entity.model.nodeTransformations);// 定义比例节点转换，用于显示隐藏const transformation = new Cesium.NodeTransformationProperty({scale: new Cesium.Cartesian3(1.0, 1.0, 1.0)});// 记录当前时间const current = viewer.clock.currentTime.secondsOfDay;// 模型实体添加节点控制entity.model.nodeTransformations.addProperty('SRB_Flame2', transformation);// 时间轴监听事件let onTickEvent;// 时间轴监听回调function adjust() {// 200 秒后隐藏 SRB_Flame2 组件if (viewer.clock.currentTime.secondsOfDay > current + 200) {const transformation = new Cesium.NodeTransformationProperty({scale: new Cesium.Cartesian3(0.0, 0.0, 0.0)});entity.model.nodeTransformations.SRB_Flame2 = transformation;onTickEvent();}}onTickEvent = viewer.clock.onTick.addEventListener(adjust);// 设置观察角度
entity.viewFrom = new Cesium.Cartesian3(-1000, 100,-1000);

完整代码


<style>@import url(../templates/bucket.css);
</style>
<div id="cesiumContainer" class="fullSize"></div>
<div id="loadingOverlay"><h1>Loading...</h1></div>
<div id="toolbar"><span><h2>请调整至合适视角！<h4/><br/>开始阶段：SRB_Flame2 （通过 model.nodeTransformations 控制）尾焰开启<br/><br/>和 BoosterFlames （通过 czml articulations控制）尾焰开启！<br/><br/>viewer时钟 100 秒之后，BoosterFlames 尾焰关闭，<br/><br/>SRB_Flame4 和 SRB_Flame6（通过 czml nodeTransformations 控制） 开启！<br/><br/></span>
</div>

// 火箭模拟发射数据
const czml = [{"id": "document","name": "SpaceX","version": "1.0","clock": {"interval": "2023-06-14T10:00:00Z/2023-06-14T10:17:33Z","currentTime": "2023-06-14T10:00:00Z","multiplier": 10,"range": "CLAMPED","step": "SYSTEM_CLOCK_MULTIPLIER"}},{"id": "Vulcan","availability": "2023-06-14T10:00:00Z/2023-06-14T10:17:33Z","name": "Vulcan","billboard": {"show": true,"image": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAAAAjSURBVChTYyAa/EcDUGEIgIphAKg0XRSAAFQMDqDChAADAwDC13+BJ+0oDwAAAABJRU5ErkJgggAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==","scale": 1,"pixelOffset": {"cartesian2": [0, 0]},"eyeOffset": {"cartesian": [0, 0, 0]},"horizontalOrigin": "CENTER","verticalOrigin": "CENTER","color": [{"interval": "2023-06-14T10:00:00Z/2023-06-14T10:10:00Z","rgba": [0, 255, 0, 255]},{"interval": "2023-06-14T10:10:00Z/2023-06-14T10:13:20Z","rgba": [255, 255, 0, 255]},{"interval": "2023-06-14T10:13:20Z/9999-12-31T23:59:59.9999999Z","rgba": [255, 0, 255, 255]}]},"label": {"show": false,"text": "Vulcan","font": "21pt Lucida Console","style": "FILL_AND_OUTLINE","scale": 0.5,"pixelOffset": {"cartesian2": [5, -4]},"horizontalOrigin": "LEFT","verticalOrigin": "CENTER","fillColor": [{"interval": "2023-06-14T10:00:00Z/2023-06-14T10:10:00Z","rgba": [0, 255, 0, 255]},{"interval": "2023-06-14T10:10:00Z/2023-06-14T10:13:20Z","rgba": [255, 255, 0, 255]},{"interval": "2023-06-14T10:13:20Z/9999-12-31T23:59:59.9999999Z","rgba": [255, 0, 255, 255]}],"outlineColor": {"rgba": [0, 0, 0, 255]},"outlineWidth": 2},"path": {"show": [{"interval": "2023-06-14T10:00:00Z/2023-06-14T10:17:33Z","boolean": true}],"width": 5,"resolution": 1,"leadTime": [{"interval": "2023-06-14T10:00:00Z/2023-06-14T10:17:33Z","epoch": "2023-06-14T10:00:00Z","number": [0, 1053,1053, 0]}],"trailTime": [{"interval": "2023-06-14T10:00:00Z/2023-06-14T10:17:33Z","epoch": "2023-06-14T10:00:00Z","number": [0, 0,1053, 1053]}],"material": {polylineGlow: {color: [{"interval": "2023-06-14T10:00:00Z/2023-06-14T10:10:00Z",rgba: [255, 0, 0, 255],},{"interval": "2023-06-14T10:10:00Z/2023-06-14T10:13:20Z",rgba: [0, 0, 255, 255],},{"interval": "2023-06-14T10:13:20Z/9999-12-31T23:59:59.9999999Z",rgba: [255, 0, 255, 255],}],glowPower: 0.25,// taperPower: 0.5,},},},"model": {"show": true,"gltf": [{"interval": "2023-06-14T10:00:00Z/9999-12-31T23:59:59.9999999Z","uri": "https://cesium.com/public/SandcastleSampleData/launchvehicle.glb"}],"minimumPixelSize": 512,"scale": 15,"runAnimations": false,// 自定义的关节动作设置火焰"articulations": {// 火箭中间火焰"BoosterFlames Size": {"epoch": "2023-06-14T10:00:00Z","number": [0, 1,49, 1,50, 0,9999, 0]},},// nodeTransformations 设置火焰显示隐藏"nodeTransformations": {// 第六个火焰节点名称"SRB_Flame6": {// 比例（按照模型设置的中心点）"scale": {"epoch": "2023-06-14T10:00:00Z","cartesian": [0.0, 0, 0, 0,120.0, 0, 0, 0,121.0, 1.0, 1.0, 1.0,200.0, 1.0, 1.0, 1.0,],},},// 第五个火焰节点名称"SRB_Flame4": {// 比例（按照模型设置的中心点）"scale": {"epoch": "2023-06-14T10:00:00Z","cartesian": [0.0, 0, 0, 0,150.0, 0, 0, 0,151.0, 1.0, 1.0, 1.0,200.0, 1.0, 1.0, 1.0,],},},},},"position": {"interpolationAlgorithm": "LAGRANGE","interpolationDegree": 2,"referenceFrame": "FIXED","epoch": "2023-06-14T10:00:00Z","cartesian": [0.000, -2174195.199042614, 4389988.019058515, 4070606.7900844226,250.000, -2828836.74243954, 4527941.384141082, 4322899.592600973,750.000, -3812052.7676919936, 3910960.7948377975, 4168079.0591541207,1053.000, -3929362.40133975, 3277792.786767426, 3795371.463871257,]},"orientation": {"velocityReference": "#position"},},
];const viewer = new Cesium.Viewer("cesiumContainer", {shouldAnimate: true,
});const dataSourcePromise = viewer.dataSources.add(Cesium.CzmlDataSource.load(czml)
);dataSourcePromise.then(function (dataSource) {// 获取模型实体const entity = dataSource.entities.getById("Vulcan");// 模型视角跟随viewer.trackedEntity = entity;console.log(entity.model.nodeTransformations);// 定义比例节点转换，用于显示隐藏const transformation = new Cesium.NodeTransformationProperty({scale: new Cesium.Cartesian3(1.0, 1.0, 1.0)});// 记录当前时间const current = viewer.clock.currentTime.secondsOfDay;// 模型实体添加节点控制entity.model.nodeTransformations.addProperty('SRB_Flame2', transformation);// 时间轴监听事件let onTickEvent;// 时间轴监听回调function adjust() {// 200 秒后隐藏 SRB_Flame2 组件if (viewer.clock.currentTime.secondsOfDay > current + 100) {console.log('SRB_Flame2 尾焰关闭！');// 重新定义火焰比例const transformation = new Cesium.NodeTransformationProperty({scale: new Cesium.Cartesian3(0.0, 0.0, 0.0)});entity.model.nodeTransformations.SRB_Flame2 = transformation;onTickEvent();}}onTickEvent = viewer.clock.onTick.addEventListener(adjust);// 设置观察角度entity.viewFrom = new Cesium.Cartesian3(-1000, 100,-1000);}).catch(function (error) {console.error(error);});

在线示例

三种方式（CZML、nodeTransformations）修改模型节点组件属性（修改比例、旋转、移动等）

在这里插入图片描述

在这里插入图片描述

参考博客：

[1]: 【Cesium】计算模型的朝向四元数，实现模型运动中调整朝向

[2]: czml api

[3]: CZML Model - Node Transformations.html

[4]: Transformations 代码设置节点旋转

[5]: cesium-CZML描述动态场景

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

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

相关文章

jenkins pipeline项目

jenkins pipeline项目

回到目录 将练习jenkins使用pipeline项目&#xff0c;结合k8s发布一个简单的springboot项目 前提&#xff1a;jenkins的环境和k8s环境都已经安装完成&#xff0c;提前准备了gitlab和一个简单的springboot项目 创建一个流水线项目 流水线中选择git&#xff0c;并选择gitlab的…
阅读更多...
快速排序和qsort函数详解详解qsort函数

快速排序和qsort函数详解详解qsort函数

&#x1f495;是非成败转头空&#xff0c;青山依旧在&#xff0c;几度夕阳红&#x1f495; 作者&#xff1a;Mylvzi 文章主要内容&#xff1a;快速排序和qsort函数详解 前言&#xff1a; 我们之前学习过冒泡排序&#xff0c;冒泡排序尽管很方便&#xff0c;但也存在一些局限性…
阅读更多...
vue+iviewUi+oss直传阿里云上传文件

vue+iviewUi+oss直传阿里云上传文件

前端实现文件上传到oss&#xff08;阿里云&#xff09;适用于vue、react、uni-app&#xff0c;获取视频第一帧图片 用户获取oss配置信息将文件上传到阿里云&#xff0c;保证了安全性和减轻服务器负担。一般文件资源很多直接上传到服务器会加重服务器负担此时可以选择上传到oss&…
阅读更多...
字节C++后端面试总结

字节C++后端面试总结

字节的面经，技术栈是 C++ 后端。 计算机网络 UDP和TCP区别 先说了概念一个是面向连接的基于字节流的可靠连接，一个是不需要连接的基于数据报的不可靠传输 然后说了几个小点，比如首部长度、应用场景、服务对象什么的。 补充： 还有一个很重要的点：UDP 的实时性比 TCP 好…
阅读更多...
Java的抽象类不能被实例化

Java的抽象类不能被实例化

Java的抽象类不能被实例化。如果试图实例化&#xff0c;会编译报错。 示例&#xff1a; 定义一个抽象类&#xff1a; package com.thb;public abstract class AbstractPoint {public AbstractPoint() {} }再定义一个主类&#xff1a; package com.thb;public class Test4 {p…
阅读更多...
从源码层面深度剖析Spring循环依赖 | 京东云技术团队

从源码层面深度剖析Spring循环依赖 | 京东云技术团队

以下举例皆针对单例模式讨论 图解参考 https://www.processon.com/view/link/60e3b0ae0e3e74200e2478ce 1、Spring 如何创建Bean&#xff1f; 对于单例Bean来说&#xff0c;在Spring容器整个生命周期内&#xff0c;有且只有一个对象。 Spring 在创建 Bean 过程中&#xff0…
阅读更多...
中电金信：ChatGPT一夜爆火，知识图谱何以应战？

中电金信：ChatGPT一夜爆火，知识图谱何以应战？

随着ChatGPT的爆火出圈 人工智能再次迎来发展小高潮 那么作为此前搜索领域的主流技术 知识图谱前路又将如何呢&#xff1f; 事实上&#xff0c;ChatGPT也并非“万能”&#xff0c;作为黑箱模型&#xff0c;ChatGPT很难验证生成的知识是否准确。并且ChatGPT是通过概率模型执行推…
阅读更多...
全新二开美化版UI好看的社区源码下载/反编译版

全新二开美化版UI好看的社区源码下载/反编译版

2023全新二开美化版UI精美的社区源码下载/反编译版 之前我分享过Rule原版&#xff0c;相信大家已经有很多人搭建好了。这次我要分享的是RuleAPP的二开美化版&#xff08;请尊重每个作者的版权&#xff09;&#xff0c;这个版本没有加密&#xff0c;可以进行反编译&#xff0c;…
阅读更多...
大数据——推荐系统

大数据——推荐系统

1 推荐系统的发展 推荐系统是指面对没有需求的用户在进入产品时&#xff0c;要给用户推荐什么东西&#xff0c;现在的APP基本上都会采用推荐系统。 从一开始的1990s开始的门户网站&#xff0c;像Yahoo、搜狐和Hao123等等&#xff0c;都是基于分类目录的网页导航网站&#xff0…
阅读更多...
Llama 2：开放基础和微调聊天模型

Llama 2：开放基础和微调聊天模型

介绍 大型语言模型(llm)作为高能力的人工智能助手，在复杂的推理任务中表现出色，这些任务需要广泛领域的专家知识，包括编程和创意写作等专业领域。它们可以通过直观的聊天界面与人类进行交互，这在公众中得到了迅速而广泛的采用。 法学硕士的能力是显著的考虑到训练的表面上…
阅读更多...
产业互联网-跨境电商B2B平台

产业互联网-跨境电商B2B平台

【背景】&#xff1a;互联网已经进入web3.0时代&#xff0c;产业互联网是互联网关键时点&#xff0c;特别是跨境电商&#xff0c;速卖通&#xff0c;亚马逊&#xff0c;wish Ebay&#xff0c;还有出海的titok,temu等&#xff0c;中国企业或平台走出来也是一条光明大通&#xff…
阅读更多...
3.4 网络安全管理设备

3.4 网络安全管理设备

数据参考&#xff1a;CISP官方 目录 IDS (入侵检测系统)网络安全审计漏洞扫描系统VPN&#xff08;虚拟专网&#xff09;堡垒主机安全管理平台 一、IDS (入侵检测系统) 入侵检测系统&#xff08;IDS&#xff09;是一种网络安全设备&#xff0c;用于监测和检测网络中的入侵行…
阅读更多...
【TypeScript】交叉类型联合类型（四）

【TypeScript】交叉类型联合类型（四）

【TypeScript】交叉类型&联合类型&#xff08;四&#xff09; 【TypeScript】交叉类型&联合类型&#xff08;四&#xff09;一、简介二、交叉类型2.1 交叉类型使用的注意点2.2 基本数据类型交叉2.3 对象类型交叉 三、联合类型四、类型缩减 一、简介 TypeScript 中的交…
阅读更多...
坐标转换-使用geotools读取和转换地理空间表的坐标系（sqlserver、postgresql）

坐标转换-使用geotools读取和转换地理空间表的坐标系（sqlserver、postgresql）

前言&#xff1a; 业务上通过GIS软件将空间数据导入到数据库时&#xff0c;因为不同的数据来源和软件设置&#xff0c;可能导入到数据库的空间表坐标系是各种各样的。 如果要把数据库空间表发布到geoserver并且统一坐标系&#xff0c;只是在geoserver单纯的设置坐标系只是改了…
阅读更多...
jvm-程序计数器

jvm-程序计数器

1、是什么 4 学习路线 类加载器 内存结构方法区 类堆 对象虚拟机栈程序计数器本地方法栈 执行引擎解释器编译器 热点代码 5 程序计数器–作用 java源代码编译蛏二进制字节码 jvm指令。 对所有平台保持一致性。记住下一条jvm指令的执行地址。寄存器&#xff0c;cpu中读取速度…
阅读更多...
从零开始学习 Java：简单易懂的入门指南之API、String类（八）

从零开始学习 Java：简单易懂的入门指南之API、String类（八）

常用API 1.API1.1API概述1.2如何使用API帮助文档 2.String类2.1String类概述2.2String类的特点2.3String类的构造方法2.4创建字符串对象两种方式的区别2.5字符串的比较2.5.1号的作用2.5.2equals方法的作用 2.6用户登录案例2.6.1案例需求2.6.2代码实现 2.7遍历字符串案例2.7.1案…
阅读更多...
elementUi select下拉框触底加载异步分页数据

elementUi select下拉框触底加载异步分页数据

在Element UI中&#xff0c;可以通过监听select下拉框的visible-change事件来实现触底加载下一页的效果。 方式一&#xff1a;利用elementUi的事件 具体步骤如下&#xff1a; 首先&#xff0c;在select组件中设置&#xff1a;visible-change"handleVisibleChange"…
阅读更多...
【代码解读】RRNet: A Hybrid Detector for Object Detection in Drone-captured Images

【代码解读】RRNet: A Hybrid Detector for Object Detection in Drone-captured Images

文章目录 1. train.py2. DistributedWrapper类2.1 init函数2.2 train函数2.3 dist_training_process函数 3. RRNetOperator类3.1 init函数3.1.1 make_dataloader函数 3.2 training_process函数3.2.1 criterion函数 4. RRNet类&#xff08;网络模型类&#xff09;4.1 init函数4.…
阅读更多...
【GitOps系列】如何实施自动化渐进式交付？

【GitOps系列】如何实施自动化渐进式交付？

文章目录 前言自动渐进式交付概述自动渐进式交付准备创建生产环境创建 AnalysisTemplate访问生产环境安装Prometheus配置 Ingress-Nginx 和 ServiceMonitor验证 Ingress-Nginx 指标 自动渐进式交付实战自动渐进式交付成功自动渐进式交付失败 结语 前言 在实施金丝雀发布的过程中…
阅读更多...
无涯教程-Perl - References(引用)

无涯教程-Perl - References(引用)

Perl引用是一个标量数据类型&#xff0c;该数据类型保存另一个值的位置&#xff0c;该值可以是标量&#xff0c;数组或哈希。 创建引用 变量&#xff0c;子程序或值创建引用很容易&#xff0c;方法是在其前面加上反斜杠&#xff0c;如下所示: $scalarref \$foo; $arrayref …
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023