Cesium Note1:添加3D模型

预览

代码

下载模型，将模型放在public目录下！！！

cesium/Apps/SampleData/models at main · CesiumGS/cesium

An open-source JavaScript library for world-class 3D globes and maps :earth_americas: - cesium/Apps/SampleData/models at main · CesiumGS/cesium

https://github.com/CesiumGS/cesium/tree/main/Apps/SampleData/models

📢📢📢这里的模型一定要放在public目录下： uri: 'Cesium_Air.glb'，放在其他目录下加载不出来！

会报错：Failed to load model: nUnexpected token < in JSON at position 0’


const initCesium = () => {
    const view = new Cesium.Viewer("cesiumContainer", {
        infoBox: false,
        selectionIndicator: false,
        shadows: true,
        shouldAnimate: true,
    });

    let position = Cesium.Cartesian3.fromDegrees(116.236393, 39.975119, 25000);
    // 设置模型方向
    let hpRoll = new Cesium.HeadingPitchRoll(Cesium.Math.toRadians(45), 0, 0);
    let orientation = Cesium.Transforms.headingPitchRollQuaternion(position, hpRoll);
    // 添加模型
    let model = view.entities.add({
        // 模型id
        id: 'model',
        // 模型位置
        position: position,
        // 模型方向
        orientation: orientation,
        // 模型资源
        model: {
            // 模型路径
            // uri: '../Apps/SampleData/models/CesiumAir/Cesium_Air.glb',
            uri: 'Cesium_Air.glb',
            // 模型最小刻度
            minimumPixelSize: 64,
            // 模型最大刻度
            maximumSize: 128,
            // 模型是否可见
            show: true,
            // 模型轮廓颜色
            silhouetteColor: Cesium.Color.WHITE,
            // 模型轮廓大小，单位px
            silhouetteSize: 5,
            // 模型颜色
            color: Cesium.Color.CORAL
        },
        // 添加描述
        description: '飞机模型'
    });
    // 视角切换到模型
    view.trackedEntity = model;
}