cesium加载飞机模型，entity方式和primitive方式加载，缩放至模型处

最新推荐文章于 2025-04-02 14:55:12 发布

A873054267

最新推荐文章于 2025-04-02 14:55:12 发布

阅读量6.1k

点赞数 1

分类专栏： cesium 文章标签： cesium 加载三维模型缩放至

本文链接：https://blog.csdn.net/A873054267/article/details/83479649

版权

cesium 专栏收录该内容

78 篇文章

订阅专栏

本文介绍如何使用Cesium库创建一个WebGL地图应用程序，包括设置视口、禁用默认控件、加载3D模型并调整其位置与比例，以及设置相机视角。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Use correct character set. -->
    <meta charset="utf-8">
    <!-- Tell IE to use the latest, best version. -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- Make the application on mobile take up the full browser screen and disable user scaling. -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <title>Hello World!</title>
    <script src="./Build/Cesium/Cesium.js"></script>
    <style>
        @import url(./Build/Cesium/Widgets/widgets.css);
        html, body, #cesiumContainer {
            width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
        }
    </style>
</head>
<body>
<div id="cesiumContainer"></div>

<script>
    Cesium.Ion.defaultAccessToken='token';
    var viewer = new Cesium.Viewer('cesiumContainer',{
        baseLayerPicker:false,
        timeline:false,
        homeButton:false,
        fullscreenButton:false,
        infoBox:false,
        sceneModePicker:false,
        navigationInstructionsInitiallyVisible:false,
        navigationHelpButton:false,

        animation:false
    });
    var scene = viewer.scene;

    //在搜索框中搜索 Exton, PA即可找到飞机所在位置
//entity方式加载
    // var entity = viewer.entities.add({
    //     position : Cesium.Cartesian3.fromDegrees(-75.62898254394531, 40.02804946899414,0),
    //     model : {
    //         uri : './Apps/SampleData/models/CesiumAir/Cesium_Air.gltf',
    //         scale:200
    //     }
    // });
 //viewer.trackedEntity = entity; </script>
//primitive方式加载
    var modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(
        Cesium.Cartesian3.fromDegrees(-75.62898254394531, 40.02804946899414, 0.0));
    var model = scene.primitives.add(Cesium.Model.fromGltf({
        url : './Apps/SampleData/models/CesiumAir/Cesium_Air.gltf',
        modelMatrix : modelMatrix,
        scale : 200.0,

    }));
    // Cesium.when(model.readyPromise).then(function(model) {
    //     model.activeAnimations.addAll({
    //         loop : Cesium.ModelAnimationLoop.REPEAT
    //     });
    // });
//通过viewer设置镜头，飞行至实体位置
    viewer.camera.setView({
        destination : Cesium.Cartesian3.fromDegrees(-75.62898254394531, 40.02804946899414, 0.0)
    });
    //viewer.zoomTo([-75.62898254394531, 40.02804946899414,0]);
  
</body>
<script ></script>
</html>