Cesium给物体添加贴图

baker_zhuang

已于 2024-05-22 14:21:05 修改

阅读量814

点赞数 1

分类专栏： cesium 文章标签：贴图

于 2023-09-07 09:39:07 首次发布

本文链接：https://blog.csdn.net/qq_26881073/article/details/133763487

版权

cesium 专栏收录该内容

12 篇文章 1 订阅

订阅专栏

之前有讲过在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 以上如果有问题

baker_zhuang

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
3
评论
Cesium给物体添加贴图

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

扫一扫