当前位置：首页 > article >正文

cesium.js加载模型后，重新设置旋转角度属性值

article 2025/1/23 13:16:12

// 加载模型


        var position = Cesium.Cartesian3.fromDegrees(longitude, latitude, height);

        // 计算矩阵
        var rollAngleDegrees = 15; // 设置翻滚角度
        var rollAngleRadians = Cesium.Math.toRadians(rollAngleDegrees); // 将角度转换为弧度
        var orientation = Cesium.Transforms.eastNorthUpToFixedFrame(position);
        var rollMatrix = Cesium.Matrix3.fromRotationZ(rollAngleRadians); // 创建绕 Z 轴旋转的矩阵
        var orientationWithRoll = Cesium.Matrix4.multiplyByMatrix3(orientation, rollMatrix, new Cesium.Matrix4());

        // 加载模型并设置位置和翻滚角
        var model = Cesium.Model.fromGltf({
            url: './assets/module.gltf',
            modelMatrix: orientationWithRoll, // 设置模型的位置和翻滚角
            minimumPixelSize: 16
        });
        viewer.scene.primitives.add(model);

// 重新设置模型角度
                setTimeout(function(){
            // 设置父级旋转
               let dat2a = 0
                   setInterval(function(){
                       dat2a +=10
                       var newRollAngleDegrees = dat2a; // 设置新的翻滚角度
                       var newRollAngleRadians = Cesium.Math.toRadians(newRollAngleDegrees); // 将角度转换为弧度
                       var newRollMatrix = Cesium.Matrix3.fromRotationY(newRollAngleRadians); // 创建新的绕 Z 轴旋转的矩阵
                       // 获取模型的当前模型矩阵
                       var modelMatrix = model.modelMatrix.clone();
                       // 将新的翻滚角度应用到模型的模型矩阵中
                       var newModelMatrix = Cesium.Matrix4.multiplyByMatrix3(modelMatrix, newRollMatrix, new Cesium.Matrix4());
                       // 更新模型的模型矩阵
                       model.modelMatrix = newModelMatrix;
               },1000)
   
                // 设置指定子名称为fly的模型旋转
               let dat1a = 0
               setInterval(function(){
                    dat1a +=5
                    model._nodesByName.fly.matrix = Cesium.Matrix4.fromTranslationQuaternionRotationScale(
                        model._nodesByName.fly._runtimeNode.translation, // 平移
                        Cesium.Quaternion.fromAxisAngle(Cesium.Cartesian3.UNIT_Y, Cesium.Math.toRadians(dat1a)), // 绕Z轴旋转90度的四元数
                        model._nodesByName.fly._runtimeNode.scale 
                    );
                },800)
        },3000)

cesium.js官网版本：1.1051，代码内显示版本为：1.19.11

首先，通过 Cesium.Cartesian3.fromDegrees 方法创建了一个位置向量 position，该向量表示模型在地球表面的位置，由经度、纬度和高度构成。
接着，通过 Cesium.Transforms.eastNorthUpToFixedFrame 方法创建了一个基于给定位置的朝向矩阵 orientation，用于将模型放置在地球表面并保持朝向。
然后，定义了一个角度变量 rollAngleDegrees，用于设置模型的翻滚角度。通过 Cesium.Math.toRadians 方法将角度转换为弧度。
使用 Cesium.Matrix3.fromRotationZ 方法创建了一个绕Z轴旋转的矩阵 rollMatrix，用于将模型进行翻滚。
使用 Cesium.Matrix4.multiplyByMatrix3 方法将朝向矩阵 orientation 和翻滚矩阵 rollMatrix 相乘，得到了新的模型矩阵 orientationWithRoll，用于将模型放置在地球表面并进行翻滚。
调用 Cesium.Model.fromGltf 方法加载GLTF模型，并传入模型矩阵 orientationWithRoll 以及其他参数。
设置了一个定时器，在一段时间后开始修改模型的角度。首先通过设置父级节点的旋转角度，让整个模型绕Y轴旋转。随后通过设置子节点名称为'fly'的模型旋转，让特定子模型绕Y轴旋转。这两个旋转都是通过修改模型节点的变换矩阵来实现的。