cesium贴图-旋转图片-API方式

最新推荐文章于 2024-03-11 12:27:23 发布

A873054267

最新推荐文章于 2024-03-11 12:27:23 发布

阅读量3.2k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： cesium

本文链接：https://blog.youkuaiyun.com/A873054267/article/details/103953717

cesium 专栏收录该内容

78 篇文章

订阅专栏

本文介绍如何使用Cesium在三维场景中添加带有特定材质的箭头和红平面实体，通过设置图片路径、正反面交替显示及旋转定位，实现丰富的视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

方法1：

//图片目录必须在静态文件夹下，否则会被打包导致找不到，无贴图效果
var image="../../../../static/arrow/"+key+".png"
//var image = '../img/arrow/'+key+".png";

// 设置x,y的正负值，可完成图片的正反面交替
var arrowMaterial = new Cesium.Material.fromType('Image', {
  image : image,
  repeat : {
    x : 1,
    y : 1
  }
});
var primitive = new Cesium.Primitive({
  geometryInstances : geomInstance[key],
  appearance : new Cesium.MaterialAppearance({
    material : arrowMaterial
  }),
  show:this.show,
  asynchronous:false
});
viewer.scene.primitives.add(primitive)

方法2：

var position = Cesium.Cartesian3.fromDegrees(116.30073537233423,40.03365630724397,0);
var heading = Cesium.Math.toRadians(-20.0);
var pitch = Cesium.Math.toRadians(0);
var roll = Cesium.Math.toRadians(1.0);
var orientation = Cesium.Transforms.headingPitchRollQuaternion(position, new Cesium.HeadingPitchRoll(heading, pitch, roll));

//定义orientation可以旋转图片

var redPlane = viewer.entities.add({
name : 'Red plane with black outline',
position: position,
orientation : orientation,
plane : {
plane : new Cesium.Plane(Cesium.Cartesian3.UNIT_Z, 0.0),
dimensions : new Cesium.Cartesian2(7.0, 17.0),
material : '1.jpg',
outline : true,
outlineColor : Cesium.Color.BLACK
}
});

viewer.zoomTo(redPlane)