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

简介: 这篇文章说明了如何在Cesium中修改地球的贴图,替换为自定义的图像或视频纹理。

这节讲下如何修改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>

效果图 1693962808926.jpg 测试的时候需要提供MP4的视频,如果是替换图片的话需要提供图片。保证相对路径的准确, 好了,以上如果有问题可以在评论区给我留言

相关文章
|
图形学 开发者
3D模型如何设置凹凸贴图?
3D模型如何设置凹凸贴图?
162 0
|
定位技术
Threejs实现绘制地球,地理位置标注、经纬度转换世界坐标threejs坐标
Threejs实现绘制地球,地理位置标注、经纬度转换世界坐标threejs坐标
1577 0
Threejs实现绘制地球,地理位置标注、经纬度转换世界坐标threejs坐标
|
2月前
ThreeJs创建球体
这篇文章讲解了如何在Three.js中创建并添加一个球体到场景中,包括定义球体的几何形状、赋予材质以及最终渲染球体的过程。
58 1
|
2月前
ThreeJs给物体添加贴图
这篇文章详细说明了在Three.js中如何给3D物体添加贴图,并展示了实现局部贴图的技术和方法。
145 1
ThreeJs给物体添加贴图
|
2月前
Cesium给物体添加贴图
这篇文章讲解了在Cesium中如何为3D模型添加贴图,并提供了具体的实现步骤和代码示例。
147 2
|
2月前
ThreeJs创建圆环
这篇文章介绍了如何在Three.js中创建一个圆环(torus),包括设置圆环的几何形状、材质以及将其添加到场景中的具体步骤。
63 0
ThreeJs创建圆环
|
2月前
ThreeJs绘制圆柱体
这篇文章介绍了在Three.js中绘制圆柱体的方法,包括创建圆柱体几何体、设置材质以及将其正确放置在三维场景中的技巧。
58 0
ThreeJs绘制圆柱体
|
4月前
【threejs教程】让你的场景贴图变得多姿多彩:UV坐标详解
【8月更文挑战第6天】threejs教程:让你的场景贴图变得多姿多彩,UV坐标详解
230 5
|
4月前
|
API
【threejs教程】让你的场景五颜绿色:纹理贴图与环境贴图
【8月更文挑战第6天】【threejs教程】让你的场景五颜绿色:纹理贴图与环境贴图
217 11
|
算法 vr&ar 图形学
GLTF编辑器告诉你凹凸贴图的作用
凹凸贴图在计算机图形学中被广泛应用于各种领域,以增加图形的真实感和细节。它能够提供更加逼真的视觉效果,使观众或用户能够更好地沉浸在虚拟的世界中。
341 0