使用銫繪製三角形時出現錯誤

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>