美文网首页开源Cesium
Cesium gltf模型姿态动态调整

Cesium gltf模型姿态动态调整

作者: WebGiser | 来源:发表于2022-11-20 10:38 被阅读0次

    Cesium 动态调整 gltf模型姿态:包含中心点、平移、旋转、缩放。

    效果

    image.png

    代码

    <template>
        <div>
            <div id="cesiumContainer"></div>
            <div class="form">
                <el-form ref="form" :model="form" label-width="80px">
                    <el-form-item>
                        <div class="title">模型姿态动态调整</div>
                    </el-form-item>
                    <el-form-item label="经度">
                        <el-input v-model.number="form.lon"></el-input>
                    </el-form-item>
                    <el-form-item label="纬度">
                        <el-input v-model.number="form.lat"></el-input>
                    </el-form-item>
                    <el-form-item label="高度">
                        <el-input v-model.number="form.height"></el-input>
                    </el-form-item>
                    <el-form-item label="缩放比例">
                        <el-slider v-model.number="form.scale" :min="1" :max="50"></el-slider>
                    </el-form-item>
                    <el-form-item label="平移-X">
                        <el-slider v-model.number="form.offsetX"></el-slider>
                    </el-form-item>
                    <el-form-item label="平移-Y">
                        <el-slider v-model.number="form.offsetY"></el-slider>
                    </el-form-item>
                    <el-form-item label="平移-Z">
                        <el-slider v-model.number="form.offsetZ"></el-slider>
                    </el-form-item>
                    <el-form-item label="航向角">
                        <el-slider v-model.number="form.heading" :min="0" :max="360"></el-slider>
                    </el-form-item>
                    <el-form-item label="俯仰角">
                        <el-slider v-model.number="form.pitch" :min="0" :max="360"></el-slider>
                    </el-form-item>
                    <el-form-item label="翻滚角">
                        <el-slider v-model.number="form.roll" :min="0" :max="360"></el-slider>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="locatePos">定位</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </template>
    
    <script>
    let model;
    export default {
        name: "ChangeModel",
        data() {
            return {
                form: {
                    lon: 110,
                    lat: 30,
                    height: 300,
                    scale: 1,
                    offsetX: 0,
                    offsetY: 0,
                    offsetZ: 0,
                    heading: 0,
                    pitch: 0,
                    roll: 0,
                },
            };
        },
        watch: {
            form: {
                handler: function(){
                    this.changePos();
                },
                immediate: false,
                deep: true
            }
        },
        mounted() {
            this.initViewer();
            this.loadModel();
        },
        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() {
                let origin = Cesium.Cartesian3.fromDegrees(this.form.lon, this.form.lat, this.form.height);
                let modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(origin);
                model = Cesium.Model.fromGltf({
                    url: "data/Cesium_Air.glb",
                    modelMatrix: modelMatrix,
                });
                model.readyPromise.then(function(model) {
                    // Play all animations when the model is ready to render
                    model.activeAnimations.addAll();
                });
                viewer.scene.primitives.add(model);
                this.locatePos();
            },
            // 改变位置
            changePos() {
                // 确定矩阵变化的原点
                let origin = Cesium.Cartesian3.fromDegrees(this.form.lon, this.form.lat, this.form.height);
                let transform = Cesium.Transforms.eastNorthUpToFixedFrame(origin);
                // 缩放
                let scale = Cesium.Matrix4.fromScale(new Cesium.Cartesian3(this.form.scale, this.form.scale, this.form.scale));
                Cesium.Matrix4.multiply(transform, scale, transform);
                // 平移
                let translation = Cesium.Matrix4.fromTranslation(new Cesium.Cartesian3(this.form.offsetX, this.form.offsetY, this.form.offsetZ));
                Cesium.Matrix4.multiply(transform, translation, transform);
                // 旋转
                let heading = Cesium.Math.toRadians(this.form.heading);
                let pitch = Cesium.Math.toRadians(this.form.pitch);
                let roll = Cesium.Math.toRadians(this.form.roll);
                let hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);
                let matrix3 = Cesium.Matrix3.fromHeadingPitchRoll(hpr);
                let rotation = Cesium.Matrix4.fromRotationTranslation(matrix3);
                Cesium.Matrix4.multiply(transform, rotation, transform);
                // 设置
                model.modelMatrix = transform;
            },
            // 定位
            locatePos() {
                viewer.camera.flyTo({
                    destination: Cesium.Cartesian3.fromDegrees(this.form.lon, this.form.lat, this.form.height + 100),
                });
            },
        },
    };
    </script>
    
    <style scoped>
    #cesiumContainer {
        position: absolute;
        width: 100%;
        height: 100%;
    }
    .title{
        font-size: 18px;
        font-weight: bold;
    }
    .form {
        position: absolute;
        background-color: #ffffff;
        padding: 5px;
        top: 5px;
        left: 5px;
    }
    </style>
    ~~
    

    相关文章

      网友评论

        本文标题:Cesium gltf模型姿态动态调整

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