用铯画几个三角形

Question

我试图在一个例子中用铯画几个三角形。我的代码只适用于绘制一个三角形，但当我扩展位置（两个或多个三角形）时，我会出错。

    var extent = Cesium.Rectangle.fromDegrees(100, 30, 108, 36);
    Cesium.Camera.DEFAULT_VIEW_RECTANGLE = extent;
    Cesium.Camera.DEFAULT_VIEW_FACTOR = 0.5;
    var viewer = new Cesium.Viewer('cesiumContainer', {
        navigationHelpButton: false, animation: false, timeline: false
    });
    // original sample begins here
    var mypositions = Cesium.Cartesian3.fromDegreesArrayHeights([
        -94.6714,35.9641,322.543,
        -94.6717,35.9642,325.51,
        -94.6717, 35.9639, 324.724,
        -94.6717,35.9639,324.717,
        -94.6717,35.9639,324.724,
        -94.6717,35.9639,324.719 ]);
    // unroll 'mypositions' into a flat array here
    var numPositions = mypositions.length;
    var pos = new Float64Array(numPositions * 3);
    for (var i = 0; i < numPositions; ++i) {
        pos[i * 3] = mypositions[i].x;
        pos[i * 3 + 1] = mypositions[i].y;
        pos[i * 3 + 2] = mypositions[i].z;
    }
    var geometry = new Cesium.Geometry({
        attributes: {
            position: new Cesium.GeometryAttribute({
                componentDatatype: Cesium.ComponentDatatype.DOUBLE, // not FLOAT
                componentsPerAttribute: 3,
                values: pos
            }),
            normal: new Cesium.GeometryAttribute({
                componentDatatype: Cesium.ComponentDatatype.FLOAT,
                componentsPerAttribute: 3,
                values: new Float32Array([255.0, 0.0, 0.0, 0.0, 255.0, 0.0, 0.0, 0.0, 255.0])
            })
        },

        indices: new Uint32Array([0, 1, 2]),
        primitiveType: Cesium.PrimitiveType.TRIANGLES,
        boundingSphere: Cesium.BoundingSphere.fromVertices(pos)
    });

    var myInstance = new Cesium.GeometryInstance({
        geometry: geometry,
        attributes: {
            color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.RED)
        },
        show: new Cesium.ShowGeometryInstanceAttribute(true)
    });


    viewer.scene.primitives.add(new Cesium.Primitive({
        geometryInstances: [myInstance],
        asynchronous: false,
            appearance: new Cesium.PerInstanceColorAppearance({
            closed: true,
            translucent: false
        })
    })); 

我得到的错误是：

所有属性列表必须具有相同数量的属性。

如何扩展此代码以绘制多个三角形？

Answer 1

此错误告诉您，位置、法线和索引（如果存在）必须都与总点数一致。在上面的例子中，您只为两个三角形中的一个提供了法向量和索引。

事实上，如果你的三角形在任何地方都没有共享顶点，你就不需要提供索引。所以，我在下面的代码中评论了这一行，并为所有三角形编写了法向量。

请注意，这是在铯中创建几何体的最低级别方法，在更高级别上有更容易的方法，例如CZML多边形或Entity.polygon.

尽管如此，这里还是有一份修复了一些问题的代码副本：

var extent = Cesium.Rectangle.fromDegrees(-98, 30, -90, 39);
Cesium.Camera.DEFAULT_VIEW_RECTANGLE = extent;
Cesium.Camera.DEFAULT_VIEW_FACTOR = 0.5;
var viewer = new Cesium.Viewer('cesiumContainer', {
  navigationHelpButton: false, animation: false, timeline: false
});
var mypositions = Cesium.Cartesian3.fromDegreesArrayHeights([
  // Triangle A
  -90.6714, 35.9641, 322.543,
  -94.6717, 38.9642, 325.51,
  -97.6717, 35.9639, 324.724,
  // Triangle B
  -94.6717, 30.9639, 324.717,
  -90.6717, 32.9639, 324.724,
  -94.6717, 34.9639, 324.719 ]);
// unroll 'mypositions' into a flat array here
var numPositions = mypositions.length;
var pos = new Float64Array(numPositions * 3);
var normals = new Float32Array(numPositions * 3);
for (var i = 0; i < numPositions; ++i) {
  pos[i * 3] = mypositions[i].x;
  pos[i * 3 + 1] = mypositions[i].y;
  pos[i * 3 + 2] = mypositions[i].z;
  normals[i * 3] = 0.0;
  normals[i * 3 + 1] = 0.0;
  normals[i * 3 + 2] = 1.0;
}
var geometry = new Cesium.Geometry({
  attributes: {
    position: new Cesium.GeometryAttribute({
      componentDatatype: Cesium.ComponentDatatype.DOUBLE, // not FLOAT
      componentsPerAttribute: 3,
      values: pos
    }),
    normal: new Cesium.GeometryAttribute({
      componentDatatype: Cesium.ComponentDatatype.FLOAT,
      componentsPerAttribute: 3,
      values: normals
    })
  },
  // Don't need the following line if no vertices are shared.
  //indices: new Uint32Array([0, 1, 2, 3, 4, 5]),
  primitiveType: Cesium.PrimitiveType.TRIANGLES,
  boundingSphere: Cesium.BoundingSphere.fromVertices(pos)
});
var myInstance = new Cesium.GeometryInstance({
  geometry: geometry,
  attributes: {
    color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.RED)
  },
  show: new Cesium.ShowGeometryInstanceAttribute(true)
});
viewer.scene.primitives.add(new Cesium.Primitive({
  geometryInstances: [myInstance],
  asynchronous: false,
  appearance: new Cesium.PerInstanceColorAppearance({
    closed: true,
    translucent: false
  })
}));

html, body, #cesiumContainer {
  width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
  font-family: sans-serif;
}

<link href="http://cesiumjs.org/releases/1.16/Build/Cesium/Widgets/widgets.css" 
      rel="stylesheet"/>
<script src="http://cesiumjs.org/releases/1.16/Build/Cesium/Cesium.js">
</script>
<div id="cesiumContainer"></div>