美文网首页Cesium
Cesium 加载gltf模型性能测试(entity方式)

Cesium 加载gltf模型性能测试(entity方式)

作者: WebGiser | 来源:发表于2022-10-07 21:17 被阅读0次

    Cesium entity加载了 500 个飞机模型(同一个模型),50ms 改变一次坐标,帧率保持在 27FPS 左右。


    image.png
    <template>
        <div id="cesiumContainer"></div>
    </template>
    
    <script>
    export default {
        name: "MultModel",
        mounted() {
            this.initViewer();
            this.loadModel();
            this.changePos();
        },
        methods: {
            initViewer() {
                let defaultRect = Cesium.Rectangle.fromDegrees(90, 20, 130, 50);
                Cesium.Camera.DEFAULT_VIEW_RECTANGLE = defaultRect;
                window.viewer = new Cesium.Viewer("cesiumContainer", {
                    animation: false,
                    shouldAnimate: true,
                    baseLayerPicker: false,
                    fullscreenButton: false,
                    geocoder: false,
                    homeButton: false,
                    sceneModePicker: false,
                    selectionIndicator: false,
                    timeline: false,
                    navigationHelpButton: false,
                    infoBox: false,
                    navigationInstructionsInitiallyVisible: false,
                    imageryProvider: new Cesium.UrlTemplateImageryProvider({
                        url: "https://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
                    }),
                });
                window.viewer.scene.debugShowFramesPerSecond = true;
            },
            loadModel() {
                for (let i = 0; i < 500; i++) {
                    let lon = 110 + Math.random() / 10;
                    let lat = 30 + Math.random() / 10;
                    let entity = viewer.entities.add({
                        id: i,
                        position: Cesium.Cartesian3.fromDegrees(lon, lat, 100),
                        model: {
                            uri: "data/Cesium_Air.glb",
                            scale: 20,
                            color: Cesium.Color.fromRandom(),
                        },
                    });
                }
                viewer.camera.flyTo({
                    destination: Cesium.Cartesian3.fromDegrees(110, 30, 5000),
                });
            },
            changePos() {
                setTimeout(() => {
                    setInterval(() => {
                        for (let i = 0; i < 500; i++) {
                            let entity = viewer.entities.getById(i);
                            let carto = Cesium.Cartographic.fromCartesian(entity.position.getValue());
                            let lon = Cesium.Math.toDegrees(carto.longitude);
                            let lat = Cesium.Math.toDegrees(carto.latitude);
                            let height = carto.height;
                            lon = lon + Math.random() / 1000;
                            lat = lat + Math.random() / 1000;
                            entity.position = Cesium.Cartesian3.fromDegrees(lon, lat, height);
                        }
                    }, 50);
                }, 6000);
            },
        },
    };
    </script>
    
    <style>
    
    </style>
    

    相关文章

      网友评论

        本文标题:Cesium 加载gltf模型性能测试(entity方式)

        本文链接:https://www.haomeiwen.com/subject/mhobartx.html