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

1. Model示例讲解

http://localhost:8080/Apps/Sandcastle/index.html?src=development%2F3D%20Models.html&label=Development

scene.primitives.add增加一个图元

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

createModel具体使用讲解

1. modelMatrix：

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

modelMatrix：飞机在空间的姿态

2. Cesium.Transforms.headingPitchRollToFixedFrame：

  const modelMatrix = Cesium.Transforms.headingPitchRollToFixedFrame(
    origin,
    hpr
  );

origin：三维空间的位置

  const origin = Cesium.Cartesian3.fromDegrees(
    -123.0744619,
    44.0503706,
    height
  );

-123.0744619：西经
44.0503706：北纬
height：高度

3. model：

这里可以对模型进行一些设置（颜色、阴影 … ）

5. readyPromise camera.lookAt：

看模型的视角
cesium是将视角将模型的中心点进行绑定

      camera.lookAt(
        center,
        new Cesium.HeadingPitchRange(heading, pitch, r * 2.0)
      );

解除绑定

Sandcastle使用讲解

1. Cesium.knockout

// The viewModel tracks the state of our mini application.
const viewModel = {
  color: "White",
  colors: ["White", "Red", "Green", "Blue", "Yellow", "Gray"],
  alpha: 1.0,
  colorBlendMode: "Highlight",
  colorBlendModes: ["Highlight", "Replace", "Mix"],
  colorBlendAmount: 0.5,
  colorBlendAmountEnabled: false,
};

// Convert the viewModel members into knockout observables.
Cesium.knockout.track(viewModel);

// Bind the viewModel to the DOM elements of the UI that call for it.
const toolbar = document.getElementById("toolbar");
Cesium.knockout.applyBindings(viewModel, toolbar);

          <tr>
            <td>Mode</td>
            <td>
              <select data-bind="options: colorBlendModes, value: colorBlendMode"></select>
            </td>
          </tr>

2. Cesium.knockout.track(viewModel) Cesium.knockout.applyBindings(viewModel, toolbar)

Cesium.knockout
  .getObservable(viewModel, "color")
  .subscribe(function (newValue) {
    model.color = Cesium.Color.fromAlpha(
      getColor(newValue),
      Number(viewModel.alpha)
    );
  });

Cesium.knockout
  .getObservable(viewModel, "alpha")
  .subscribe(function (newValue) {
    model.color = Cesium.Color.fromAlpha(
      getColor(viewModel.color),
      Number(newValue)
    );
  });

Cesium.knockout
  .getObservable(viewModel, "colorBlendMode")
  .subscribe(function (newValue) {
    const colorBlendMode = getColorBlendMode(newValue);
    model.colorBlendMode = colorBlendMode;
    viewModel.colorBlendAmountEnabled =
      colorBlendMode === Cesium.ColorBlendMode.MIX;
  });

Cesium.knockout
  .getObservable(viewModel, "colorBlendAmount")
  .subscribe(function (newValue) {
    model.colorBlendAmount = Number(newValue);
  });

2. ModelInstance示例讲解

http://localhost:8080/Apps/Sandcastle/index.html?src=development%2F3D%20Models%20Instancing.html&label=Development

Cesium.ModelInstanceCollection

function createCollection(instances) {
  const collection = scene.primitives.add(
    new Cesium.ModelInstanceCollection({
      url: url,
      instances: instances,
    })
  );

3. Model子节点控制

http://localhost:8080/Apps/Sandcastle/index.html?src=development%2F3D%20Models%20Node%20Explorer.html&label=Development

    // respond to viewmodel changes by applying the computed matrix
    Cesium.knockout
      .getObservable(viewModel, "matrix")
      .subscribe(function (newValue) {
        const node = model.getNode(viewModel.nodeName);
        if (!Cesium.defined(node.originalMatrix)) {
          node.originalMatrix = node.matrix.clone();
        }
        node.matrix = Cesium.Matrix4.multiply(
          node.originalMatrix,
          newValue,
          new Cesium.Matrix4()
        );
      });
  })
  .catch(function (error) {
    window.alert(error);
  });