cesium视椎体的移动旋转

最新推荐文章于 2024-05-11 13:48:34 发布

翱翔的大鱼

最新推荐文章于 2024-05-11 13:48:34 发布

阅读量1.5k

点赞数 1

分类专栏： cesium 文章标签：数码相机

本文链接：https://blog.csdn.net/Scd666666/article/details/129242315

版权

cesium 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

前面我讲过视椎体的创建，今天讲一下椎体的旋转移动了。
首先有个方法就是确定两个点，就比如电灯一样从一点望向另一点，

  let directions = Cesium.Cartesian3.normalize(Cesium.Cartesian3.subtract(secondPos, firstPos, new Cesium.Cartesian3()), new Cesium.Cartesian3());
       spotLightCamera.position = firstPos;//firstPos是相机起点
       spotLightCamera.direction = directions;//direction是相机面向的方向
        spotLightCamera.setView({ // 设置视椎体的俯仰角度
        destination: secondPos,
        orientation: {
          heading: Cesium.Math.toRadians(defaultAngle),
          pitch: Cesium.Math.toRadians(pitch),
          roll: Cesium.Math.toRadians(0.0)
        }
      });
      let scratchRight = new Cesium.Cartesian3();
      let scratchRotation = new Cesium.Matrix3();
      var scratchOrientation = new Cesium.Quaternion();
      // let position = spotLightCamera.positionWC;
      let direction = spotLightCamera.directionWC;
      let up = spotLightCamera.upWC;
      let right = spotLightCamera.rightWC;
      right = Cesium.Cartesian3.negate(right, scratchRight);
      let rotation = scratchRotation;
      Cesium.Matrix3.setColumn(rotation, 0, right, rotation);
      Cesium.Matrix3.setColumn(rotation, 1, up, rotation);
      Cesium.Matrix3.setColumn(rotation, 2, direction, rotation);
      let orientation = Cesium.Quaternion.fromRotationMatrix(rotation, scratchOrientation);
       this.createFrustum = new CreateFrustum({
            viewer,
            Cesium,
            position: secondPos,
            orientation: orientation,
            fov: 20,
            near: 0.01,
            far: 1000,
            aspectRatio: 100 / 100,
          });
       this.createFrustum.update(secondPos, orientation) //更新一下视椎体的状态

第二种方法可以直接通过计算两个点的方向然后去设置一些自己需要的角度去旋转

  const viewer = window['lineEditMap']
  const Cesium = this.$cesium
  let spotLightCamera = new Cesium.Camera(viewer.scene);
  spotLightCamera.setView({ // 设置视椎体的俯仰角度
        destination: secondPos,
        orientation: {
          heading: Cesium.Math.toRadians(defaultAngle),//这里需要自己去理解对应的一些角度以cesium的三维空间XYZ轴去旋转
          pitch: Cesium.Math.toRadians(pitch),//这里需要自己去理解对应的一些角度以cesium的三维空间XYZ轴去旋转
          roll: Cesium.Math.toRadians(0.0)//这里需要自己去理解对应的一些角度以cesium的三维空间XYZ轴去旋转
        }
      });
      let scratchRight = new Cesium.Cartesian3();
      let scratchRotation = new Cesium.Matrix3();
      var scratchOrientation = new Cesium.Quaternion();
      // let position = spotLightCamera.positionWC;
      let direction = spotLightCamera.directionWC;
      let up = spotLightCamera.upWC;
      let right = spotLightCamera.rightWC;
      right = Cesium.Cartesian3.negate(right, scratchRight);
      let rotation = scratchRotation;
      Cesium.Matrix3.setColumn(rotation, 0, right, rotation);
      Cesium.Matrix3.setColumn(rotation, 1, up, rotation);
      Cesium.Matrix3.setColumn(rotation, 2, direction, rotation);
      let orientation = Cesium.Quaternion.fromRotationMatrix(rotation, scratchOrientation);
      this.createFrustum = new CreateFrustum({
          viewer,
          Cesium,
          position: secondPos,
          orientation: orientation,
          fov: fov,
          near: 0.01,
          far: 1000,
          aspectRatio: 100 / 100,
        })
        this.createFrustum.update(secondPos, orientation)

上面就是可以直接输入一个想要的角度就可以去旋转了，如果要移动的话就需要时实的去更新一下视椎体的经纬度就行了。
如果想要把是视椎体的XYZ三个轴也显示出来那就需要：

 const viewer = window['lineEditMap']
      const Cesium = this.$cesium
      // X轴：红色，Y轴：绿色，Z轴：蓝色
      let modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(p);
      viewer.scene.primitives.add(
        new Cesium.DebugModelMatrixPrimitive({
          modelMatrix: modelMatrix,
          length: 30000.0,
          width: 3.0,
        })
      );

也可以创建视点，当然了这都是看自己需要的：

  // 创建坐标系
    createFrame(p) {
      const viewer = window['lineEditMap']
      const Cesium = this.$cesium
      // X轴：红色，Y轴：绿色，Z轴：蓝色
      let modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(p);
      viewer.scene.primitives.add(
        new Cesium.DebugModelMatrixPrimitive({
          modelMatrix: modelMatrix,
          length: 30000.0,
          width: 3.0,
        })
      );
    },