【mars3d】通过参数设置旋转速度,自定义风机动画函数

最新推荐文章于 2024-11-16 15:00:14 发布

mianmianwu

最新推荐文章于 2024-11-16 15:00:14 发布

阅读量254

点赞数 3

分类专栏： vue app Mars3d 文章标签： 3d 前端 javascript 运维

本文链接：https://blog.csdn.net/m0_69803146/article/details/142100504

版权

Mars3d 同时被 3 个专栏收录

194 篇文章 18 订阅

订阅专栏

vue

190 篇文章 2 订阅

订阅专栏

app

172 篇文章 0 订阅

订阅专栏

   //在map上增加风机模型效果

 const graphic = new mars3d.graphic.ModelEntity({
    name: "风机",
    position: [116.35104, 30.86225, 374.4],
    style: {
      url: "//data.mars3d.cn/gltf/mars/fengche.gltf",
      heading: 270,
      scale: 30,
      minimumPixelSize: 100,
      silhouette: false,

      distanceDisplayCondition: true,
      distanceDisplayCondition_near: 0,
      distanceDisplayCondition_far: 9000,
      distanceDisplayBillboard: {
        // 当视角距离超过一定距离(distanceDisplayCondition_far定义的) 后显示为图标对象的样式
        image: "img/marker/square.png",
        scale: 1
      },

      // 高亮时的样式（默认为鼠标移入，也可以指定type:'click'单击高亮），构造后也可以openHighlight、closeHighlight方法来手动调用
      highlight: {
        silhouette: true,
        silhouetteColor: "#00ffff",
        silhouetteSize: 3
      }
    },
    attr: { remark: "示例2" }
  })
  graphicLayer.addGraphic(graphic)



   // 自定义风机动画 todo: 可以使用动画api进行动画添加
      modelEntity.on(mars3d.EventType.load, function (event) {
        const model = event.model;
        const viewer = map.viewer;

        // 缩放区域到模型所在位置
        const r = 2.0 * Math.max(model.boundingSphere.radius, map.camera.frustum.near);

        const heading = Cesium.Math.toRadians(0.0);
        const pitch = Cesium.Math.toRadians(-10.0);
        map.camera.flyToBoundingSphere(model.boundingSphere, {
          offset: new Cesium.HeadingPitchRange(heading, pitch, r * 3.5)
        });

        const rotationSpeed = 1;
        const bladeNode = model.getNode("fengye");
        let previousTime = Cesium.JulianDate.now();

        viewer.scene.preRender.addEventListener(function (_, time) {
          if (bladeNode) {
            const originalMatrix = Cesium.Matrix4.clone(bladeNode.matrix);
            // 计算旋转角度
            const deltaTime = Cesium.JulianDate.secondsDifference(time, previousTime);
            const rotationAngle = deltaTime * rotationSpeed;

            // 创建旋转矩阵
            const rotationMatrix = Cesium.Matrix3.fromRotationZ(rotationAngle);

            // 将旋转矩阵应用到风叶节点
            bladeNode.matrix = Cesium.Matrix4.multiplyByMatrix3(originalMatrix, rotationMatrix, new Cesium.Matrix4());
            previousTime = Cesium.JulianDate.clone(time, previousTime);
          }
        });
      });