Question

使用产品：超图cesium 

操作系统：win10

问题描述：使用Primitive创建多个几何实例geometryInstances。材质都会共用一个，如何实现不同材质

Answer 1

您好，根据您得需求，为您推荐以下代码示例：
其中关键API为PerInstanceColorAppearance， 您可查看其API 文档 ：

http://support.supermap.com.cn:8090/webgl/Cesium/docs/Documentation/Primitive.html?classFilter=pr 

http://support.supermap.com.cn:8090/webgl/Cesium/docs/Documentation/PerInstanceColorAppearance.html?classFilter=PerInstanceColorAppearance

// 2. Draw different instances each with a unique color
var rectangleInstance = new Cesium.GeometryInstance({
  geometry : new Cesium.RectangleGeometry({
    rectangle : Cesium.Rectangle.fromDegrees(-140.0, 30.0, -100.0, 40.0),
    vertexFormat : Cesium.PerInstanceColorAppearance.VERTEX_FORMAT
  }),
  id : 'rectangle',
  attributes : {
    color : new Cesium.ColorGeometryInstanceAttribute(0.0, 1.0, 1.0, 0.5)
  }
});
var ellipsoidInstance = new Cesium.GeometryInstance({
  geometry : new Cesium.EllipsoidGeometry({
    radii : new Cesium.Cartesian3(500000.0, 500000.0, 1000000.0),
    vertexFormat : Cesium.VertexFormat.POSITION_AND_NORMAL
  }),
  modelMatrix : Cesium.Matrix4.multiplyByTranslation(Cesium.Transforms.eastNorthUpToFixedFrame(
    Cesium.Cartesian3.fromDegrees(-95.59777, 40.03883)), new Cesium.Cartesian3(0.0, 0.0, 500000.0), new Cesium.Matrix4()),
  id : 'ellipsoid',
  attributes : {
    color : Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.AQUA)
  }
});
scene.primitives.add(new Cesium.Primitive({
  geometryInstances : [rectangleInstance, ellipsoidInstance],
  appearance : new Cesium.PerInstanceColorAppearance()
}));

Comments

viewer.scene.primitives.add(new Cesium.Primitive({
        geometryInstances : ellipse,
        // appearance :new Cesium.MaterialAppearance({
        //   material :new Cesium.Material({
        //     fabric: {
        //       type: 'mym',
        //       uniforms: {
        //         color:  Cesium.Color.fromCssColorString("#f4d01b"), // 颜色
        //       },
        //       source: circleSource,
        //     },
        //   }),
        //   faceForward : false
        // }),
        appearance : new Cesium.PerInstanceColorAppearance({
          flat : true,
          translucent : false,
        })
      }));

我加了attributes的color，注释那部分代码并没有设置上颜色，不过source生效了。

然后下面的appearance 可以生效但是就没有了source属性

---

我的目的是实现水波纹效果，ellipse这个里面是所有水波纹的几何实例，每个实例的颜色不一样

---

您好，您可以考虑创建多个Cesium.Primitive。同种颜色的几何实体放到一个geometryInstances。

---

还是你思路清晰，如果说有三种颜色的实例，创建三个primitive。就需要viewer.scene.primitives.add三次，怎么控制某一个颜色的实例显示隐藏呢

---

您好，创建的 primitive进行显隐藏控制，
var primitiveColor1 = viewer.scene.primitives.add(...);

primitiveColor1.show=true; //显示

primitiveColor1.show=false; //隐藏

---

谢谢~~~~~~~~~~~

---

viewer.scene.primitives.add(new Cesium.BillboardCollection())  你好我以这种方式往里面添加了100个标牌，怎么获取其中一个标牌呢

---

您好， 您可以通过 index 获取指定的标牌，示例代码：

const billboards = scene.primitives.add(new Cesium.BillboardCollection());
billboards.add({
  position : new Cesium.Cartesian3(1.0, 2.0, 3.0),
  image : 'url/to/image'
});
billboards.add({
  position : new Cesium.Cartesian3(4.0, 5.0, 6.0),
  image : 'url/to/another/image'
});

billboards.get(0);// 获取第1个
billboards.get(1);// 获取第2个
billboards.get(index-1);// 获取第index个, index<=billboards.length

 另外： 为了您能得到及时的帮助，新的咨询请创建新的问题，这样以便我们及时关注到您的问题。