Cesium给物体添加贴图

简介: 这篇文章讲解了在Cesium中如何为3D模型添加贴图,并提供了具体的实现步骤和代码示例。

之前有讲过在Cesium的地球上放置一个正方体,这节在正方体上添加贴图,使他看起来更美观一点,贴图可以用哪个任何的图片,我这里就随便找一张放上去,主要演示实现效果和用法。步骤还是和之前一样,先在地球上放置一个正方体,然后再通过改变正方体的材质,添加材质的图片为选中的图片,最后将配置好的正方体加载到场景中。具体的步骤和代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <!-- Include the CesiumJS JavaScript and CSS files -->
  <script src="https://cesium.com/downloads/cesiumjs/releases/1.100/Build/Cesium/Cesium.js"></script>
  <link href="https://cesium.com/downloads/cesiumjs/releases/1.100/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
</head>
<body>
  <div id="cesiumContainer"></div>
  <div id="credit"></div>
  <script>
    // 设置token
    Cesium.Ion.defaultAccessToken = 'token';

    //初始化div容器为cesium
    var viewer = new Cesium.Viewer('cesiumContainer');
    //设置一个正方体
    var cube = {
      //正方体的名字
      name : 'Red box with black outline',
      //正方体的经纬度坐标
      position: Cesium.Cartesian3.fromDegrees(-107.0, 40.0, 300000.0),
      //正方体的长宽高和颜色等
      box : {
        dimensions : new Cesium.Cartesian3(400000.0, 300000.0, 500000.0),
        material : Cesium.Color.RED.withAlpha(0.5),
        outline : true,
        outlineColor : Cesium.Color.BLACK
      }
    }

    //添加正方体的材质,这里用图片作为纹理贴图
    cube.box.material = new Cesium.ImageMaterialProperty({
        //贴图图片的地址
        image:'aaa.jpg',
        //可以给贴图设置颜色,设置颜色后图片就不是彩色的了
        //color: Cesium.Color.BLUE,
        //设置贴图的横向和纵向的图片数量,这里横向为1,纵向为1,就等于是不平铺
        repeat : new Cesium.Cartesian2(1, 1)
    });
    //将正方体加载到场景中
    var redBox = viewer.entities.add(cube);

    //将相机视角调整到适合显示场景中的所有实体的范围
    viewer.zoomTo(viewer.entities);

  </script>
 </div>
</body>
</html>

效果图 微信图片_20230907091959.png 以上如果有问题

相关文章
Cesium开发:模型实体高亮
Cesium开发:模型实体高亮
899 0
cesium添加实体不被地形遮挡的参数设置
disableDepthTestDistance:指定从相机到禁用深度测试的距离,关于深度测试我们将在后面的文章中介绍到,由于深度测试的存在,我们的对象很多时候会被地形挡住,如下:
2693 0
cesium添加实体不被地形遮挡的参数设置
|
定位技术
干货!解决Cesium中Entity移动漂移的问题
案例场景:在Cesium开发三维场景展示中,肯定会碰到加载Entity的需求,如果在你的gis应用中,带了地形的展示。那么在旋转切换画面时,Entity是否跟着一起动了起来,感觉像漂移一样呢?
4102 0
干货!解决Cesium中Entity移动漂移的问题
|
11月前
|
定位技术
Cesium修改地球的贴图为视频或者图片
这篇文章说明了如何在Cesium中修改地球的贴图,替换为自定义的图像或视频纹理。
412 1
Cesium修改地球的贴图为视频或者图片
|
11月前
|
JSON 数据格式
Cesium实现贴地线
这篇文章介绍了在Cesium中实现地面贴合线的效果及其相关技术要点。
250 5
Cesium实现贴地线
|
11月前
Cesium绘制透明光圈
这篇文章介绍了如何在Cesium中绘制具有透明度的圆形光圈,并提供了实现这一功能的具体代码和步骤。
569 3
Cesium绘制透明光圈
|
11月前
Cesium添加3DTile
这篇文章介绍了如何在Cesium中添加3DTile内容,以增强三维地理空间数据的表现,并提供了实现的具体步骤和代码示例。
322 1
Cesium添加3DTile
|
11月前
Cesium自动生成建筑物3D轮廓模型
这篇文章讲解了如何使用Cesium根据地形和建筑物的高度数据自动生成3D轮廓模型的方法。
548 2
|
存储 缓存 数据可视化
Cesium渲染一帧中用到的图形技术
Cesium渲染一帧中用到的图形技术
342 0
Cesium渲染一帧中用到的图形技术
|
定位技术
Cesium案例解析(九)——Rotatable2DMap旋转2D地图
Cesium案例解析(九)——Rotatable2DMap旋转2D地图
311 0