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

发布于:2024-03-18 ⋅ 阅读:(189) ⋅ 点赞:(0)
// 加载模型


        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 

 

  1. 首先,通过 Cesium.Cartesian3.fromDegrees 方法创建了一个位置向量 position,该向量表示模型在地球表面的位置,由经度、纬度和高度构成。

  2. 接着,通过 Cesium.Transforms.eastNorthUpToFixedFrame 方法创建了一个基于给定位置的朝向矩阵 orientation,用于将模型放置在地球表面并保持朝向。

  3. 然后,定义了一个角度变量 rollAngleDegrees,用于设置模型的翻滚角度。通过 Cesium.Math.toRadians 方法将角度转换为弧度。

  4. 使用 Cesium.Matrix3.fromRotationZ 方法创建了一个绕Z轴旋转的矩阵 rollMatrix,用于将模型进行翻滚。

  5. 使用 Cesium.Matrix4.multiplyByMatrix3 方法将朝向矩阵 orientation 和翻滚矩阵 rollMatrix 相乘,得到了新的模型矩阵 orientationWithRoll,用于将模型放置在地球表面并进行翻滚。

  6. 调用 Cesium.Model.fromGltf 方法加载GLTF模型,并传入模型矩阵 orientationWithRoll 以及其他参数。

  7. 设置了一个定时器,在一段时间后开始修改模型的角度。首先通过设置父级节点的旋转角度,让整个模型绕Y轴旋转。随后通过设置子节点名称为'fly'的模型旋转,让特定子模型绕Y轴旋转。这两个旋转都是通过修改模型节点的变换矩阵来实现的。

本文含有隐藏内容,请 开通VIP 后查看

网站公告

今日签到

点亮在社区的每一天
去签到