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 以上如果有问题

相关文章
|
存储 编解码 算法
凹凸贴图和法线贴图的区别
凹凸贴图适用于一些简单的凹凸效果,而法线贴图则更适合提供更高精度和真实感的凹凸纹理效果
361 1
|
存储 vr&ar 图形学
如何设置3D模型法线贴图?
如何设置3D模型法线贴图?
162 0
|
存储 前端开发 JavaScript
three.js 纹理
纹理是添加到材料中的图像或颜色,以提供更多细节或美感。纹理是Three.js中必不可少的主题。在本节中,我们将了解如何将基本纹理应用于我们的材质。
112 0
|
3月前
ThreeJs给物体添加贴图
这篇文章详细说明了在Three.js中如何给3D物体添加贴图,并展示了实现局部贴图的技术和方法。
201 1
ThreeJs给物体添加贴图
|
3月前
|
定位技术
Cesium修改地球的贴图为视频或者图片
这篇文章说明了如何在Cesium中修改地球的贴图,替换为自定义的图像或视频纹理。
146 1
Cesium修改地球的贴图为视频或者图片
|
3月前
|
人工智能 编解码 前端开发
深入了解 Three.js 中的材质与光照
Three.js 是一个强大的 JavaScript 库,用于在浏览器中创建和渲染 3D 场景。它的易用性和灵活性使得开发者能够轻松构建丰富的视觉体验。在 Three.js 中,材质与光照是影响物体外观和场景氛围的关键因素。本文将深入探讨 Three.js 中的材质类型、光源类型、光照模型,以及如何将它们结合以实现逼真的效果。
92 4
|
3月前
|
JavaScript
ThreeJs通过DragControls实现物体拖动
这篇文章详细讲解了如何在Three.js中使用DragControls实现3D物体的鼠标拖动功能。
138 1
ThreeJs通过DragControls实现物体拖动
|
3月前
|
JSON 数据格式
Cesium绘制一个正方体
这篇文章详细说明了如何在Cesium中创建并精确控制一个厘米级精度的立方体模型。
66 2
Cesium绘制一个正方体
|
5月前
|
开发框架
threejs做特效:实现物体的发光效果-EffectComposer详解!
【8月更文挑战第7天】实现物体的发光效果-EffectComposer详解!
754 6
threejs做特效:实现物体的发光效果-EffectComposer详解!
253Echarts - 3D 曲面(皮革材质)
253Echarts - 3D 曲面(皮革材质)
39 0