Cesium Primitive 旋转、缩放与移动操作

原创于 2024-12-04 16:55:43 发布 · 1.7k 阅读

17 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#TilesBuilder #算法 #cesium #webgl #前端

Cesium开发专栏收录该内容

22 篇文章

订阅专栏

Cesium Primitive 旋转、缩放与移动操作

在 3D 地球或地图应用中，Cesium 是一个强大的开源 JavaScript 库，常用于可视化地理空间数据。它提供了强大的功能，支持高效地显示和操作 3D 地图。Cesium 中的 Primitive 是一个用于渲染图形的基础类，支持几何体的展示（如球体、线条、面等）。本文将介绍如何在 Cesium 中对 Primitive 进行旋转、缩放和移动操作。

1. Cesium 中的 Primitive

在 Cesium 中，Primitive 是一种用于渲染自定义几何体的对象，它与 Entity 不同，后者是更加高层次的抽象，适用于常见的几何体，如点、线、面等。Primitive 更适合用于处理复杂的几何体，或者需要高效渲染的场景。

通常，Primitive 的操作会结合 Matrix4 变换矩阵来进行，包括旋转、缩放和移动。

2. 旋转（Rotation）

旋转操作可以通过 Matrix4 来实现，旋转矩阵是用来对物体进行角度变换的。通常，旋转是围绕某个轴进行的（如 x 轴、y 轴或 z 轴）。

示例代码：绕 Z 轴旋转 Primitive

const viewer = new Cesium.Viewer('cesiumContainer');

// 创建一个几何体对象
const geometry = new Cesium.CylinderGeometry({
  length: 100.0,
  topRadius: 50.0,
  bottomRadius: 50.0
});

// 创建一个 Primitive 对象
const primitive = new Cesium.Primitive({
  geometryInstances: new Cesium.GeometryInstance({
    geometry: geometry,
    modelMatrix: Cesium.Matrix4.IDENTITY
  }),
  appearance: new Cesium.PerInstanceColorAppearance({
    flat: true,
    translucent: false
  })
});

// 将 primitive 添加到场景中
viewer.scene.primitives.add(primitive);

// 创建旋转矩阵：绕 Z 轴旋转 45 度
const rotationMatrix = Cesium.Matrix4.fromRotationTranslation(Cesium.Matrix3.fromRotationZ(Cesium.Math.toRadians(45)));

// 设置模型的变换矩阵
primitive.modelMatrix = Cesium.Matrix4.multiply(primitive.modelMatrix, rotationMatrix, new Cesium.Matrix4());

在上述示例中，Matrix4.fromRotationTranslation 用于创建一个旋转矩阵，旋转角度为 45 度，围绕 Z 轴进行。通过修改 primitive.modelMatrix，实现了 Primitive 的旋转。

3. 缩放（Scaling）

缩放操作用于改变物体的尺寸。与旋转类似，缩放也使用变换矩阵来处理，通常是在现有的矩阵上应用缩放比例。

示例代码：对 Primitive 进行缩放

// 创建一个缩放矩阵
const scaleMatrix = Cesium.Matrix4.fromScale(new Cesium.Cartesian3(2.0, 2.0, 2.0));

// 设置模型的变换矩阵，实现缩放
primitive.modelMatrix = Cesium.Matrix4.multiply(primitive.modelMatrix, scaleMatrix, new Cesium.Matrix4());

在这个示例中，Matrix4.fromScale 创建了一个缩放矩阵，该矩阵会将物体的大小放大 2 倍。然后，我们通过 Matrix4.multiply 将缩放矩阵应用到原来的变换矩阵中。

4. 移动（Translation）

移动操作通过变换矩阵中的平移部分来实现。平移是指物体在空间中的位置改变。

示例代码：移动 Primitive

// 创建一个平移矩阵
const translationMatrix = Cesium.Matrix4.fromTranslation(new Cesium.Cartesian3(1000000.0, 0.0, 0.0));

// 设置模型的变换矩阵，实现平移
primitive.modelMatrix = Cesium.Matrix4.multiply(primitive.modelMatrix, translationMatrix, new Cesium.Matrix4());

这里，Matrix4.fromTranslation 创建了一个平移矩阵，表示将物体沿 X 轴平移 1,000,000 单位。然后，使用 Matrix4.multiply 将平移矩阵应用到 primitive 的当前变换矩阵。

5. 组合旋转、缩放与移动

Cesium 中的变换矩阵是可以组合的，多个变换（旋转、缩放、平移）可以按顺序应用于同一个物体。只需将多个变换矩阵相乘即可。

示例代码：组合旋转、缩放与平移

// 旋转矩阵
const rotationMatrix = Cesium.Matrix4.fromRotationTranslation(Cesium.Matrix3.fromRotationZ(Cesium.Math.toRadians(45)));

// 缩放矩阵
const scaleMatrix = Cesium.Matrix4.fromScale(new Cesium.Cartesian3(2.0, 2.0, 2.0));

// 平移矩阵
const translationMatrix = Cesium.Matrix4.fromTranslation(new Cesium.Cartesian3(1000000.0, 0.0, 0.0));

// 将旋转、缩放与平移矩阵按顺序组合
let modelMatrix = Cesium.Matrix4.multiply(rotationMatrix, scaleMatrix, new Cesium.Matrix4());
modelMatrix = Cesium.Matrix4.multiply(modelMatrix, translationMatrix, new Cesium.Matrix4());

// 设置 primitive 的变换矩阵
primitive.modelMatrix = modelMatrix;