javascript - 使用Cesium绘制三 Angular 形时出现错误

Question

我想用Cesium绘制三 Angular 形，其中每个顶点都是一个具有(lon，lat，alt)的地理点，并且每个顶点具有不同的颜色。但我收到错误。我是 Cesium 的新手，我认为我要做的就是定义一个几何实例并将其附加到场景中。我的代码是:

var viewer = new Cesium.Viewer('cesiumContainer');
var mypositions = Cesium.Cartesian3.fromDegreesArrayHeights([104.317776,   31.59491, 10,
105.317776, 32.59491, 20,
106.317776, 33.59491, 30]);

var pos = new Float64Array(mypositions);

    var geometry = new Cesium.Geometry({
        attributes: {
            position: new Cesium.GeometryAttribute({
                componentDatatype: Cesium.ComponentDatatype.FLOAT,
                componentsPerAttribute: 3,
                values: pos
            }),
            normal: new Cesium.GeometryAttribute({
                componentDatatype: Cesium.ComponentDatatype.FLOAT,
                componentsPerAttribute: 3,
                values: new Float32Array([0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.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],
        appearance: new Cesium.PerInstanceColorAppearance({
            closed: true,
            translucent: false
        })
    }));

但是我的网页上出现此错误:

DeveloperError: All attribute lists must have the same number of attributes.

我想知道我做错了什么以及如何解决这个问题？

Answer 1

我不知道Cesium中有针对每个顶点颜色的选项，但我至少可以修复这里示例代码中的错误，以便它正确运行。具体来说:

• 将 asynchronous: false 添加到 Primitive 选项，因为我们没有为此使用 Web Worker。

• 使用 Cesium.ComponentDatatype.DOUBLE 而不是 .FLOAT 作为 position，因为它是 Float64Array >，与 Float32Array 的法线不同。

• 最大的问题是 mypositions 是一个 Cartesian3 数组，而不是平面数组，因此不能用于初始化 Float64Array > 本地。您必须将其展开为 x、y、z 值的平面数组。

这是应用了这些更改的示例。单击底部的“运行代码片段”即可看到出现红色三 Angular 形。

// default camera view, added for clarity
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([
    104.317776, 31.59491, 10,
    105.317776, 32.59491, 20,
    102.317776, 33.59491, 30]);

// 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([0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.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
    })
}));

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>