Cesium修改地球的贴图为视频或者图片

baker_zhuang

已于 2023-09-27 15:35:26 修改

阅读量821

点赞数

分类专栏： cesium 文章标签：贴图音视频 Cesium

于 2023-09-06 09:14:13 首次发布

本文链接：https://blog.youkuaiyun.com/qq_26881073/article/details/132972248

版权

cesium 专栏收录该内容

12 篇文章

订阅专栏

这节讲下如何修改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的视频，如果是替换图片的话需要提供图片。保证相对路径的准确，好了，以上如果有问题可以在评论区给我留言