这节讲下如何修改Cesium的纹理贴图,可以修改为图片或者视频,因为默认的地球贴图其实类似百度地图,用一张张的瓦片贴上去的,在鼠标给地球放大的同时会切换更加精细的图片,这里修改后的贴图可能没有放大变得精细的功能,就只是修改一个球面的外部贴图,详细的实现方式和步骤会在代码的中提供,这里放上代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="Cesium/Cesium.js" charset="utf-8"></script>
<link href="Cesium/Widgets/widgets.css" rel="stylesheet"/>
</head>
<body>
<div id="cesiumContainer"></div>
<video id="trailer" style="display: none;" muted autoplay loop crossorigin controls>
<source src="tt.mp4" type="video/mp4">
</video>
<script>
// 设置token
Cesium.Ion.defaultAccessToken = 'token';
//初始化div容器为cesium
var viewer = new Cesium.Viewer('cesiumContainer');
//修改地球的贴为另一个图片
//var viewer = new Cesium.Viewer('cesiumContainer', {
// imageryProvider: new Cesium.SingleTileImageryProvider({
// url: 'worldimage.jpg'
// })
//});
//获取视频的div
var videoElement = document.getElementById('trailer');
//设置视频自动播放
videoElement.play();
//添加一个实体到Cesium场景中
var rect = viewer.entities.add({
//指定实体为矩形
rectangle: {
//表示全球范围的矩形区域。该矩形的经度范围为-180到180度,纬度范围为-90到90度
coordinates: Cesium.Rectangle.fromDegrees(-180.0, -90.0, 180.0, 90.0),
//将视频元素作为矩形的材质.也就是将视频作为贴图
material: videoElement
}
});
//使视图跟踪该实体
viewer.trackedEntity = rect;
</script>
</body>
</html>
效果图 测试的时候需要提供MP4的视频,如果是替换图片的话需要提供图片。保证相对路径的准确, 好了,以上如果有问题可以在评论区给我留言