Cesium-載入3D飛機模型沿指定路線前進

Apple_Coco發表於2020-09-30
3D模型

最終效果

話不多說，先上效果
最終效果

相關知識點

主要用到 CZML 相關知識

CZML 是一種用來描述動態場景的JSON架構的語言，主要用於 Cesium 在瀏覽器中的展示。它可以用來描述點、線、佈告板、模型以及其他的圖元，同時定義他們是怎樣隨時間變化的。

詳情可看：CZML介紹

我這裡就不過多贅述了。

主要程式碼

var czml = [
    {
        id: "document",
        name: "CZML Path",
        version: "1.0",
        clock: {
            interval: "2020-09-30T10:00:00Z/2020-09-30T10:01:20Z",
            currentTime: "2012-08-04T10:00:00Z",
            multiplier: 10,
        },
    },
    {
        id: "path",
        name: "path with GPS flight data",
        description: "Created by wangyu",
        availability: "2020-09-30T10:00:00Z/2020-09-30T10:01:20Z",
        path: {
            material: {
                polylineOutline: {
                    color: {
                        rgba: [255, 0, 255, 127],
                    },
                    outlineColor: {
                        rgba: [255, 0, 255, 127],
                    },
                    outlineWidth: 3,
                },
            },
            width: 5,
            leadTime: 10,
            trailTime: 1000,
            resolution: 5,
        },
        model: {
            gltf: "Assets/SampleData/models/CesiumAir/Cesium_Air.glb",
            scale: 2.0,
            minimumPixelSize: 128,
        },
        position: {
            epoch: "2020-09-30T10:00:00Z",
            cartographicDegrees: [
                0, 102.23404378554466, 27.825736605050523, 2500,
                10, 102.23691954070244, 27.82887625908256, 2500,
                20, 102.23908610745147, 27.830920963237897, 2500,
                30, 102.24222708893987, 27.834251845778994, 2500,
                40, 102.24483684219396, 27.837156939755058, 2500,
                50, 102.24821756517042, 27.838973119832243, 2500,
                60, 102.2497304631213, 27.843805668815058, 2500,
                70, 102.25017946873977, 27.849726810753346, 2500,
                80, 102.24597936406548, 27.852179959795592, 2500
            ],
        },
    },
];

var airModel;
viewer.dataSources.add(Cesium.CzmlDataSource.load(czml)).then(function (ds) {
    airModel = ds.entities.getById("path");
    // 設定模型可以隨路徑方向轉向
    airModel.orientation = new Cesium.VelocityOrientationProperty(airModel.position);
    airModel.model.alignedAxis = new Cesium.VelocityVectorProperty(airModel.position, true)
});

如果您覺得這篇文章對您有幫助，歡迎給我的 github專案 點一個⭐ ο(=•ω＜=)ρ⌒☆

相關文章