昆明网站搭建多少钱_全球访问量最大的网站排名_广州网站seo_关键词爱站网关键词挖掘工具

      之前学习了cesium的一些基本操作，现在学习cesium怎么加载模型，以及一些其他操作。

1.学习汇总目录

第一篇：cesium入门学习一-CSDN博客

2.cesium效果显示以及代码

2.1  加载模型并显示

效果：

js代码：

// 创建 Cesium Viewer
var viewer = new Cesium.Viewer('cesiumContainer');// 模型的经度、纬度、高度
var position = Cesium.Cartesian3.fromDegrees(-107.0, 40.0, 300.0); // 单位：经度、纬度、高度（米）// 添加 GLTF 模型
var model = viewer.entities.add({name: "GLTF Model",position: position,model: {uri: "/model/scene.gltf", // 替换为你的 GLTF 模型文件路径scale: 2.0, // 模型缩放比例minimumPixelSize: 128, // 模型的最小像素大小（防止缩放过远消失）maximumScale: 200, // 模型最大缩放比例（可选）color: Cesium.Color.WHITE.withAlpha(0.8) // 模型颜色和透明度}
});// 将视角缩放到模型
viewer.zoomTo(viewer.entities);

cesium支持三维模型的格式是gltf格式，我自己在网上下载了一个gltf格式的飞机文件，这里的uri路径是相对于html的路径。

路径显示图：

模型：

js文件的路径：

代码是在index.js里面写的。

2.2  飞机移动

效果：

另外一个时刻：

代码：

// // 创建 Cesium Viewer
var viewer = new Cesium.Viewer('cesiumContainer');// 模型的初始位置
var initialPosition = Cesium.Cartesian3.fromDegrees(-107.0, 40.0, 300.0);// 添加 GLTF 模型
var model = viewer.entities.add({name: "GLTF Model",position: initialPosition,model: {uri: "/model/scene.gltf", // 替换为你的 GLTF 模型路径scale: 2.0,minimumPixelSize: 128,color: Cesium.Color.WHITE.withAlpha(0.8)}
});// 定义轨迹点数组（初始包含模型的初始位置）
var positions = [initialPosition];// 添加轨迹线
var polyline = viewer.entities.add({name: "Flight Path",polyline: {positions: positions, // 动态更新轨迹点width: 3, // 线的宽度material: Cesium.Color.RED, // 线的颜色clampToGround: false // 轨迹线是否贴地}
});// 动态更新模型位置和轨迹
var startTime = Cesium.JulianDate.now();
viewer.clock.onTick.addEventListener(function () {// 计算时间间隔var currentTime = Cesium.JulianDate.now();var elapsedSeconds = Cesium.JulianDate.secondsDifference(currentTime, startTime);// 动态计算模型位置（模拟飞行轨迹）var longitude = -107.0 + elapsedSeconds * 0.01; // 模拟经度变化var latitude = 40.0 + Math.sin(elapsedSeconds * 0.1) * 0.1; // 模拟纬度变化var height = 300.0 + Math.cos(elapsedSeconds * 0.1) * 50; // 模拟高度变化var newPosition = Cesium.Cartesian3.fromDegrees(longitude, latitude, height);// 更新模型位置model.position = newPosition;// 更新轨迹点数组positions.push(newPosition);polyline.polyline.positions = positions; // 更新轨迹线
});// 将视角缩放到模型和轨迹
viewer.zoomTo(viewer.entities);

2.3 飞机移动显示轨迹线

效果：

有线，但是不是我最终要的效果

js代码：

//创建 Cesium Viewer
var viewer = new Cesium.Viewer('cesiumContainer');// 规划路径的经纬度、高度点
var plannedPositions = [Cesium.Cartesian3.fromDegrees(-107.0, 40.0, 300.0),Cesium.Cartesian3.fromDegrees(-106.9, 40.1, 350.0),Cesium.Cartesian3.fromDegrees(-106.8, 40.2, 400.0),Cesium.Cartesian3.fromDegrees(-106.7, 40.3, 450.0),Cesium.Cartesian3.fromDegrees(-106.6, 40.4, 500.0)
];// 绘制规划的轨迹线
var plannedPolyline = viewer.entities.add({name: "Planned Path",polyline: {positions: plannedPositions,width: 3, // 线的宽度material: Cesium.Color.GREEN, // 规划路径为绿色clampToGround: false // 是否贴地}
});// 初始化飞机模型位置（起点）
var model = viewer.entities.add({name: "GLTF Model",position: plannedPositions[0], // 起始点model: {uri: "/model/scene.gltf", // 替换为你的 GLTF 模型路径scale: 2.0,minimumPixelSize: 128,color: Cesium.Color.WHITE.withAlpha(0.8)}
});// 已经过的轨迹点
var passedPositions = [plannedPositions[0]];// 绘制已走的轨迹线
var passedPolyline = viewer.entities.add({name: "Passed Path",polyline: {positions: passedPositions,width: 3,material: Cesium.Color.RED, // 已走的路径为红色clampToGround: false}
});// 动态移动飞机并更新已走的轨迹线
var startTime = Cesium.JulianDate.now();
var totalSteps = plannedPositions.length - 1; // 总段数
var stepDuration = 5; // 每段的飞行时间（秒）viewer.clock.onTick.addEventListener(function () {// 当前时间var currentTime = Cesium.JulianDate.now();var elapsedSeconds = Cesium.JulianDate.secondsDifference(currentTime, startTime);// 计算当前所在段及进度var segmentIndex = Math.floor(elapsedSeconds / stepDuration);var segmentProgress = (elapsedSeconds % stepDuration) / stepDuration;if (segmentIndex < totalSteps) {// 当前段的起点和终点var startPoint = plannedPositions[segmentIndex];var endPoint = plannedPositions[segmentIndex + 1];// 计算飞机的当前位置（线性插值）var currentPosition = Cesium.Cartesian3.lerp(startPoint,endPoint,segmentProgress,new Cesium.Cartesian3());// 更新飞机模型位置model.position = currentPosition;// 更新已走的轨迹if (segmentProgress === 0 && !passedPositions.includes(startPoint)) {passedPositions.push(startPoint); // 添加段起点到已走轨迹}passedPositions.push(currentPosition); // 动态添加当前位置passedPolyline.polyline.positions = passedPositions; // 更新已走轨迹线} else {// 飞机到达终点后停止更新model.position = plannedPositions[totalSteps];}
});// 将视角缩放到路径范围
viewer.zoomTo(viewer.entities);