cesium.js加载模型后,重新设置旋转角度属性值

news/2024/4/28 5:47:09
// 加载模型var position = Cesium.Cartesian3.fromDegrees(longitude, latitude, height);// 计算矩阵var rollAngleDegrees = 15; // 设置翻滚角度var rollAngleRadians = Cesium.Math.toRadians(rollAngleDegrees); // 将角度转换为弧度var orientation = Cesium.Transforms.eastNorthUpToFixedFrame(position);var rollMatrix = Cesium.Matrix3.fromRotationZ(rollAngleRadians); // 创建绕 Z 轴旋转的矩阵var orientationWithRoll = Cesium.Matrix4.multiplyByMatrix3(orientation, rollMatrix, new Cesium.Matrix4());// 加载模型并设置位置和翻滚角var model = Cesium.Model.fromGltf({url: './assets/module.gltf',modelMatrix: orientationWithRoll, // 设置模型的位置和翻滚角minimumPixelSize: 16});viewer.scene.primitives.add(model);// 重新设置模型角度setTimeout(function(){// 设置父级旋转let dat2a = 0setInterval(function(){dat2a +=10var newRollAngleDegrees = dat2a; // 设置新的翻滚角度var newRollAngleRadians = Cesium.Math.toRadians(newRollAngleDegrees); // 将角度转换为弧度var newRollMatrix = Cesium.Matrix3.fromRotationY(newRollAngleRadians); // 创建新的绕 Z 轴旋转的矩阵// 获取模型的当前模型矩阵var modelMatrix = model.modelMatrix.clone();// 将新的翻滚角度应用到模型的模型矩阵中var newModelMatrix = Cesium.Matrix4.multiplyByMatrix3(modelMatrix, newRollMatrix, new Cesium.Matrix4());// 更新模型的模型矩阵model.modelMatrix = newModelMatrix;},1000)// 设置指定子名称为fly的模型旋转let dat1a = 0setInterval(function(){dat1a +=5model._nodesByName.fly.matrix = Cesium.Matrix4.fromTranslationQuaternionRotationScale(model._nodesByName.fly._runtimeNode.translation, // 平移Cesium.Quaternion.fromAxisAngle(Cesium.Cartesian3.UNIT_Y, Cesium.Math.toRadians(dat1a)), // 绕Z轴旋转90度的四元数model._nodesByName.fly._runtimeNode.scale );},800)},3000)

cesium.js官网版本:1.1051,代码内显示版本为:1.19.11 

 

  1. 首先,通过 Cesium.Cartesian3.fromDegrees 方法创建了一个位置向量 position,该向量表示模型在地球表面的位置,由经度、纬度和高度构成。

  2. 接着,通过 Cesium.Transforms.eastNorthUpToFixedFrame 方法创建了一个基于给定位置的朝向矩阵 orientation,用于将模型放置在地球表面并保持朝向。

  3. 然后,定义了一个角度变量 rollAngleDegrees,用于设置模型的翻滚角度。通过 Cesium.Math.toRadians 方法将角度转换为弧度。

  4. 使用 Cesium.Matrix3.fromRotationZ 方法创建了一个绕Z轴旋转的矩阵 rollMatrix,用于将模型进行翻滚。

  5. 使用 Cesium.Matrix4.multiplyByMatrix3 方法将朝向矩阵 orientation 和翻滚矩阵 rollMatrix 相乘,得到了新的模型矩阵 orientationWithRoll,用于将模型放置在地球表面并进行翻滚。

  6. 调用 Cesium.Model.fromGltf 方法加载GLTF模型,并传入模型矩阵 orientationWithRoll 以及其他参数。

  7. 设置了一个定时器,在一段时间后开始修改模型的角度。首先通过设置父级节点的旋转角度,让整个模型绕Y轴旋转。随后通过设置子节点名称为'fly'的模型旋转,让特定子模型绕Y轴旋转。这两个旋转都是通过修改模型节点的变换矩阵来实现的。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈,一经查实,立即删除!

相关文章

日本技术,马来西亚制造:NBR SELE COT无硫手指套的革命性性能

在现代工业领域,对于保持生产环境的洁净和高效至关重要。而一种名为NBR SELE COT的无硫手指套正是满足这一需求的理想选择。这款手指套由日本技术开发,采用马来西亚原材料制造,凭借其卓越的性能在工业行业中广受好评。 NBR SELE COT手指套具有…

极客早报第3期:罗斯否认插足凯特王妃婚姻;清明放假调休3天;国产伟哥去年销售近13亿

一分钟速览新闻点! 每日简报 罗斯否认插足凯特王妃婚姻清明放假调休3天国产伟哥去年销售近13亿男子持台球杆殴打2名女店员被抓今日春分淀粉肠小王子带货日销售额涨超10倍[高中生被打伤下体休学 邯郸通报](https://www.baidu.com/s?wd高中生被打伤下体休学 邯郸通报…

一、初识 Web3

瑾以此系列文章,献给那些出于好奇并且想要学习这方面知识的开发者们 在多数时间里,我们对 web3 的理解是非常模糊的 就好比提及什么是 web1 以及 web2,相关概念的解释是: 1. 从 Web3 的开始 Web3,也被称为Web3.0&…

JSP介绍与使用

文章目录 一、JSP概述二、JSP快熟入门导入JSP坐标编写HTML文件和Java代码 三、JSP原理四、JSP脚本JSP脚本案例 五、JSP缺点六、EL表达式七、JSTL标签1、<c:if>标签2、<c:foerEach>标签 八、MVC 模式和三层架构1、MVC 模式2、三层架构3、MVC 模式和三层架构的区别 一…

pyspark基础 -- DataFrame的理解与案例

DataFrame(df)介绍 datafram就是一个内存中的二维表结构&#xff0c;具备表结构的三个基本属性&#xff1a; 行列表结构描述 在结构层面&#xff0c;pyspark中的StructType对象描述了表结构&#xff0c;StructField对象描述了表的一个列信息&#xff1b;在数据层面&#xff…

在github下载的神经网络项目,如何运行?

github网页上可获取的信息 在github上面&#xff0c;有一个requirements.txt文件&#xff0c;该文件说明了项目要求的python解释器的模块。 - 此外&#xff0c;还有一个README.md文件&#xff0c;用来说明项目的运行环境以及其他的信息。例如python解释器的版本是3.7、PyTorc…