利用Cesium Primitive實現三維地球展示動態效果

一、探究Cesium Primitive的概念

Cesium是一個基於WebGL的開源JavaScript庫，用於構建三維地圖程序。Cesium Primitive是Cesium中的一個核心組件，用於繪製基本圖形元素。它的優勢在於可以在GPU上進行計算和渲染，具有高效、靈活、可擴展等特點，因此廣泛用於製作動態效果。

二、了解Cesium Primitive的基本屬性

在使用Cesium Primitive時，需要掌握其基本屬性：

1、Geometry：用於定義圖形的幾何形狀，例如平面、線、多邊形等。可以使用現成的幾何模型，也可以自定義。

// 創建一個橢球體Geometry
var geometry = new Cesium.EllipsoidGeometry({
    radii: new Cesium.Cartesian3(500000.0, 500000.0, 500000.0)
});

2、Appearance：用於定義圖形的外觀效果，例如顏色、紋理、材質等。

// 創建一個用於渲染橢球體Geometry的Appearance
var appearance = new Cesium.EllipsoidSurfaceAppearance({
    material : Cesium.Material.fromType('Color', {
        color : Cesium.Color.RED
    })
});

3、Instance：用於實例化Geometry和Appearance，生成可以渲染的圖形對象。

// 創建一個GeometryInstance對象，指定Geometry和Appearance
var instance = new Cesium.GeometryInstance({
    geometry : geometry,
    appearance : appearance,
    modelMatrix : Cesium.Matrix4.multiplyByTranslation(Cesium.Transforms.eastNorthUpToFixedFrame(Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883)), new Cesium.Cartesian3(0.0, 0.0, 100000.0), new Cesium.Matrix4())
});

三、實現三維地球展示動態效果

藉助於Cesium Primitive，可以實現多種多樣的動態效果。下面將介紹三個實現三維地球展示動態效果的示例。

1、繪製飛行路徑

通過定義PolylineGeometry和PolylineMaterialAppearance，可以繪製動態的飛行路徑。

// 定義飛行路徑的坐標點數組
var positions = Cesium.Cartesian3.fromDegreesArray([
    -122.318720, 37.690520,
    -122.277450, 37.784710,
    -122.227820, 37.831610
]);

// 創建一個PolylineGeometry
var geometry = new Cesium.PolylineGeometry({
    positions : positions,
    width: 5.0
});

// 創建一個PolylineMaterialAppearance
var appearance = new Cesium.PolylineMaterialAppearance({
    material : new Cesium.Material({
        fabric : {
            type : 'Color',
            uniforms : {
                color : Cesium.Color.RED
            }
        }
    })
});

// 創建一個GeometryInstance對象，指定PolylineGeometry和PolylineMaterialAppearance
var instance = new Cesium.GeometryInstance({
    geometry : geometry,
    appearance : appearance
});

// 創建一個Primitive對象
var primitive = new Cesium.Primitive({
    geometryInstances : [instance],
    appearance : appearance
});

// 將Primitive對象添加到場景中
viewer.scene.primitives.add(primitive);

2、實現點閃爍效果

通過定義PointGeometry和PointMaterialAppearance，可以實現點閃爍效果。

// 定義一個坐標點
var position = Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883);

// 創建一個PointGeometry
var geometry = new Cesium.PointGeometry({
    positions: [position],
    pixelSize: 10.0
});

// 創建一個PointMaterialAppearance，指定點的顏色和閃爍效果
var appearance = new Cesium.PointMaterialAppearance({
    material : Cesium.Material.fromType('Color', {
        color : Cesium.Color.YELLOW
    }),
    translucent : true,
    gltfSize : 20.0
});

// 創建一個GeometryInstance對象，指定PointGeometry和PointMaterialAppearance
var instance = new Cesium.GeometryInstance({
    geometry : geometry,
    appearance : appearance
});

// 創建一個Primitive對象
var primitive = new Cesium.Primitive({
    geometryInstances : [instance],
    appearance : appearance
});

// 將Primitive對象添加到場景中
viewer.scene.primitives.add(primitive);

// 定時改變appearance的屬性，實現點的閃爍效果
setInterval(function(){
    appearance.material.uniforms.color = Cesium.Color.fromRandom();
    appearance.material.uniforms.alpha = Cesium.Math.randomInRange(0.2, 1.0);
}, 1000);

3、實現漸變效果

通過定義BoxGeometry和BoxMaterialAppearance，可以實現漸變效果。

// 創建一個BoxGeometry
var geometry = new Cesium.BoxGeometry({
    vertexFormat: Cesium.VertexFormat.POSITION_ONLY,
    maximumCorner: new Cesium.Cartesian3(100000.0, 100000.0, 100000.0),
    minimumCorner: new Cesium.Cartesian3(-100000.0, -100000.0, -100000.0)
});

// 創建一個BoxMaterialAppearance，指定盒子的顏色和漸變效果
var appearance = new Cesium.BoxMaterialAppearance({
    material : new Cesium.Material({
        fabric : {
            type: 'Image',
            uniforms : {
                image : 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...'
            }
        }
    })
});

// 創建一個GeometryInstance對象，指定BoxGeometry和BoxMaterialAppearance
var instance = new Cesium.GeometryInstance({
    geometry : geometry,
    appearance : appearance
});

// 創建一個Primitive對象
var primitive = new Cesium.Primitive({
    geometryInstances : [instance],
    appearance : appearance
});

// 將Primitive對象添加到場景中
viewer.scene.primitives.add(primitive);

// 定時改變appearance的屬性，實現漸變效果
var count = 0;
setInterval(function(){
    appearance.material.uniforms.speed = count++;
}, 50);