在铯中画几个三角形

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

        })
    }));

我得到的错误是：

All attributes lists must have the same number of attributes.

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

Answer 1

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

实际上，如果您的三角形在任何地方都不共享顶点，则不需要提供索引。所以，我在下面的代码中注释掉了那条线，并为所有三角形写了法向量。

请注意，这是在 Cesium 中创建几何体的 lowest-level 方法，在更高层次上有更简单的方法，例如 CZML Polygons or 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>

在铯中画几个三角形

Draw several triangles in cesium

javascript

cesium