使用铯绘制三角形时出现错误

Question

我想用铯绘制三角形，其中每个顶点是具有（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的选择，因为我们没有使用此网络工作者。

• 使用Cesium.ComponentDatatype.DOUBLE而不是.FLOAT为position因为它是一个Float64Array，不像是Float32Array法线。

• 最大的问题是mypositions是Cartesian3的一个数组，不是平面数组，所以不能用于本地初始化Float64Array。您必须将其展开到x，y，z值的平面数组中。

下面是应用这些更改的示例。点击底部的“运行代码段”以查看出现的红色三角形。

// 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>