Cesium快速上手2-Model图元使用讲解

Model示例讲解,创建一个模型的过程

https://sandcastle.cesium.com/?src=3D%20Models.html&label=All

1.创建模型的讲解

1.1模型的加载

  const entity = viewer.entities.add({
    name: url,
    position: position,
    orientation: orientation,
    model: {
      uri: url,
      minimumPixelSize: 128,
      maximumScale: 20000,
    },
  });

可以看到在官方案例中，使用的是entities实体类来对model进行加载，但是在我们本地的项目中，发现其实实现的方式就是我们上篇文章中提到的primitives 图元来加载各类模型，所以我们可以知道就算是entities的底层的实现就是调用了primitives来加载

  model = scene.primitives.add(
    Cesium.Model.fromGltf({
      url: url,
      modelMatrix: modelMatrix,
      minimumPixelSize: 128,
    })
  );

1.2 model模型位置的讲解

modelMatrix

• 将模型从模型转换为世界坐标的 4x4 转换矩阵。当这是单位矩阵时，模型是在世界坐标系中绘制的，即地球的笛卡尔WGS84 坐标系
• 用来定位模型的位置
• 关于HeadingPitchRoll，表示为航向、俯仰和横滚的旋转。航向是围绕负 z 轴的旋转。俯仰是围绕负 y 轴的旋转。滚动是围绕正 x 轴的旋转可以参考这篇文章
• origin以地球为圆心，X,Y,Z值，fromDegrees就是以经纬度，加高度，最后转换成高度

  height = Cesium.defaultValue(height, 0.0);
  heading = Cesium.defaultValue(heading, 0.0);
  pitch = Cesium.defaultValue(pitch, 0.0);
  roll = Cesium.defaultValue(roll, 0.0);
  const hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);
  
  const origin = Cesium.Cartesian3.fromDegrees(
    -123.0744619,
    44.0503706,
    height
  );
  
  const modelMatrix = Cesium.Transforms.headingPitchRollToFixedFrame(
    origin,
    hpr
  );

模型加载完毕可以做的操作

  model.readyPromise.then(function (model) {
      model.color = Cesium.Color.fromAlpha(
        getColor(viewModel.color),
        Number(viewModel.alpha)
      );
      model.colorBlendMode = getColorBlendMode(
        viewModel.colorBlendMode
      );
      model.colorBlendAmount = viewModel.colorBlendAmount;
      // Play and loop all animations at half-speed
      model.activeAnimations.addAll({
        multiplier: 0.5,
        loop: Cesium.ModelAnimationLoop.REPEAT,
      });

      const camera = viewer.camera;

      // Zoom to model
      const controller = scene.screenSpaceCameraController;
      const r =
        2.0 *
        Math.max(model.boundingSphere.radius, camera.frustum.near);
      controller.minimumZoomDistance = r * 0.5;

      const center = Cesium.Matrix4.multiplyByPoint(
        model.modelMatrix,
        model.boundingSphere.center,
        new Cesium.Cartesian3()
      );
      const heading = Cesium.Math.toRadians(230.0);
      const pitch = Cesium.Math.toRadians(-20.0);
      camera.lookAt(
        center,
        new Cesium.HeadingPitchRange(heading, pitch, r * 2.0)
      );
    })
    .catch(function (error) {
      window.alert(error);
    });

颜色相关属性

• new Cesium.Color ( red , green , blue , alpha )
  一种颜色，使用红色、绿色、蓝色和 alpha 值指定，范围从 0 （无强度）到 1.0 （完全强度）
• ColorBlendMode
  定义用于混合目标颜色和图元的源颜色的不同模式。 HIGHLIGHT 将源颜色乘以目标颜色 REPLACE 用目标颜色替换源颜色 MIX 将源颜色和目标颜色混合在一起

   model.color = Cesium.Color.fromAlpha(
        getColor(viewModel.color),
        Number(viewModel.alpha)
      );
   model.colorBlendMode = getColorBlendMode(
      viewModel.colorBlendMode
    );
  model.colorBlendAmount = viewModel.colorBlendAmount;
  // Play and loop all animations at half-speed
  model.activeAnimations.addAll({
    multiplier: 0.5,
    loop: Cesium.ModelAnimationLoop.REPEAT,
  });

相机

在模型加载完成后，由相机去观察位置，所有的观察视角都是由相机决定的,相机的可以,lookAt确定了初始观察角度，还确定了后面的观察情况，已center的点旋转，HeadingPitchRoll的讲解

    const center = Cesium.Matrix4.multiplyByPoint(
        model.modelMatrix,
        model.boundingSphere.center,
        new Cesium.Cartesian3()
      );
    const heading = Cesium.Math.toRadians(230.0);
    const pitch = Cesium.Math.toRadians(-20.0);
     camera.lookAt(
       center,
       new Cesium.HeadingPitchRange(heading, pitch, r * 2.0)
     );

ScreenSpaceEventHandler事件包装

在三维创建了事件，就是基于ScreenSpaceEventHandler

const handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
handler.setInputAction(function (movement) {
  const pick = scene.pick(movement.endPosition);
  if (
    Cesium.defined(pick) &&
    Cesium.defined(pick.node) &&
    Cesium.defined(pick.mesh)
  ) {
    // Output glTF node and mesh under the mouse.
    console.log(`node: ${pick.node.name}. mesh: ${pick.mesh.name}`);
  }
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE)