cesium视椎体的移动旋转-Toy模板网

这篇具有很好参考价值的文章主要介绍了cesium视椎体的移动旋转。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

  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,
        })
      );

也可以创建视点，当然了这都是看自己需要的：文章来源地址https://www.toymoban.com/news/detail-607469.html

  // 创建坐标系
    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,
        })
      );
    },

到了这里，关于cesium视椎体的移动旋转的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！