cesium实现模型动态移动效果

文章目录

1.实现效果
2.实现方法
- 2.1实现思路
- 2.2具体代码

Cesium实战系列文章总目录：传送门

1.实现效果

2.实现方法

2.1实现思路

（1）官方沙盒示例参考：传送门
官方示例中需要弃用timeline和animate来确定不同时刻模型的位置，进而实现动画。

但是本人在开发中，禁用了timeline控件，所以就不能动态设置时刻及其位置。

因此在这里采用回调函数CallbackProperty来动态更新模型的位置。
（2）动态更新模型位置
使用Cartesian3的lerp方法：传送门
计算起点与终点之间一定比例的线性插值坐标。

2.2具体代码

具体实现代码如下：

 let startPosition = new Cesium.Cartesian3.fromDegrees(120.14046454, 30.27415039);let endPosition = new Cesium.Cartesian3.fromDegrees(120.16701991, 30.27648221);let factor = 0;// 添加模型const vehicleEntity = viewer.entities.add({position: new Cesium.CallbackProperty(function() {if (factor > 5000) {factor = 0;}factor++;// 动态更新位置return Cesium.Cartesian3.lerp(startPosition, endPosition, factor / 5000.0, new Cesium.Cartesian3());}, false),model: {uri: "../.././icons/hz/model/car.glb",scale: 1000.0,},});viewer.trackedEntity = vehicleEntity;

cesium实现模型动态移动效果相关推荐

Cesium|xt3d模型展开动画
Cesium|xt3d模型展开动画效果代码预览地址效果代码 <!DOCTYPE html> <html lang="zh-CN"><head ...
cesium实现键盘控制模型姿态变化效果
文章目录 1.实现效果 2.实现方法 2.1实现思路 2.2具体代码 Cesium实战系列文章总目录: 传送门 1.实现效果 2.实现方法参考官方沙盒示例:传送门 2.1实现思路 (1)加载模型使 ...
cesium 加载模型实现动画效果
加载模型代码: let tileModelTool={longitude: 118.57323,latitude: 32.59386,height: 218.30516,rx: 38.621906,r ...
对比分析OSG与Cesium中模型LOD的异同
1. LOD 熟悉渲染的读者可能经常听到LOD(Level Of Detail),也就是用不同的细节层次来表达同一个对象.比如下图中的雕像,从左到右精细度越来越低,最后甚至仅剩一个轮廓,已经看不出人形 ...
基于 React hooks + Typescript + Cesium 实现模型剖切分析
文章目录效果截图功能介绍实现思路实现步骤根据数据获取裁剪面 modelMatrix 创建 clippingPlanes 添加鼠标事件封装 Clipping3D 类使用 Clipping3 ...
Cesium 可变高度+动态纹理水体
Cesium 可变高度+动态纹理水体由于任务中的需求,要求使用primitive实体配合动态纹理并且可以进行高度变化,实现一种动态水体的效果. 删除原实体重新添加新实体的方法会影响系统观感. 动态纹 ...
cesium + kriging.js动态生成克里金图
cesium + kriging.js动态生成克里金图 kriging.js GIThub地址 :: https://github.com/oeo4b/kriging.js/blob/master/k ...
Cesium设置模型朝向速度矢量方向
Cesium设置模型朝向速度矢量方向文章目录 Cesium设置模型朝向速度矢量方向 1. 需求场景 2. 技术路线 2.1 VelocityOrientationProperty 2.2 Veloc ...
用pyinstaller打包pytorch环境下的深度学习模型，实现通过exe程序实现界面显示模型的分类效果
用pyinstaller打包pytorch环境下的深度学习模型,实现通过exe应用实现界面显示模型的分类效果训练深度学习模型和界面显示,看我之前的博客,链接在下面: 通过残差网络实现CLFAR-10 ...