Cesium 创建 BoxGometry 使用不同的外观

力博荣三维可视化

于 2024-03-15 11:32:32 发布

阅读量341

点赞数 1

分类专栏： cesium 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/qq_21476953/article/details/136735226

版权

cesium 专栏收录该内容

43 篇文章 8 订阅

订阅专栏

本文详细介绍了如何在Cesium中使用BoxGeometry创建3D模型，并展示了PerInstanceColorAppearance、MaterialAppearance和EllipsoidSurfaceAppearance三种不同外观方式的实例，包括设置颜色、材质和模型矩阵等关键步骤。

摘要由CSDN通过智能技术生成

Cesium 创建 BoxGometry 使用不同的外观

在这里插入图片描述

整体流程:

// step1:
const geometry = Cesium.BoxGeometry.fromDimensions({
  // Cesium.PerInstanceColorAppearance.VERTEX_FORMAT,
  vertexFormat: Cesium.VertexFormat.POSITION_AND_NORMAL,
  dimensions: new Cesium.Cartesian3(4.0, 3.0, 5.0),
})

// step2:
...
// step3:
...

// step4:
const primitive = new Cesium.Primitive({
  appearance,
  geometryInstances: instance,
})

1、PerInstanceColorAppearance

// step2:
const instance = new Cesium.GeometryInstance({
  geometry,
  modelMatrix,
  attributes: {
    color: Cesium.ColorGeometryInstanceAttribute.fromColor(
      Cesium.Color.RED.withAlpha(0.5)
    ),
  },
})

// step3:
const appearance =  new Cesium.PerInstanceColorAppearance({
  closed: true,
});

2、MaterialAppearance

// step2:
const instance = new Cesium.GeometryInstance({
  geometry,
  modelMatrix,
})

// step3:
const appearance =  new Cesium.MaterialAppearance({
  materialSupport: Cesium.MaterialAppearance.MaterialSupport.BASIC,
  material : new Cesium.Material({
    fabric : {
      type : 'Color',
      uniforms : {
        color : new Cesium.Color(1.0, 0.0, 0.0, 1.0)
      }
    }
  }),
  faceForward : true
})

3、EllipsoidSurfaceAppearance

// step2:
const instance = new Cesium.GeometryInstance({
  geometry,
  modelMatrix,
})

// step3:
const appearance =  new Cesium.EllipsoidSurfaceAppearance({
  material : new Cesium.Material({
    fabric : {
      type : 'Color',
      uniforms : {
        color : new Cesium.Color(1.0, 0.0, 0.0, 1.0)
      }
    }
  }),
  faceForward : true
})