使用cesium1.132点A绕点B的X轴旋转30度在绕Z轴旋转60

在 **Cesium 1.132** 中，实现一个点 **A** 绕另一个点 **B** 的 **X轴旋转30度**，然后再绕 **Z轴旋转60度**，需要使用 **Cesium.Matrix4** 构建复合变换矩阵。 > ✅ **注意**：Cesium 1.132 版本中 API 与较新版本基本一致，`Cesium.Matrix4.multiply` 和 `Cesium.Matrix4.multiplyByPoint` 等方法仍然可用。 --- ## 🧠 实现思路 要实现 **绕点 B 旋转**，必须进行以下步骤： 1. **平移点 A** 到以 **点 B** 为原点的坐标系：`A - B` 2. **绕 X 轴旋转 30°** 3. **绕 Z 轴旋转 60°** 4. **平移回来** 到原来坐标系：`A_rotated + B` --- ## ✅ 示例代码（适用于 Cesium 1.132） ```javascript const viewer = new Cesium.Viewer('cesiumContainer'); // 定义原始点 A 和旋转中心点 B const pointA = new Cesium.Cartesian3(1000000.0, 0.0, 0.0); // 原始点 const pointB = new Cesium.Cartesian3(0.0, 0.0, 0.0); // 旋转中心点 // 1. 创建平移矩阵：将坐标系原点移到点 B 的位置 const translateToOrigin = Cesium.Matrix4.fromTranslation( new Cesium.Cartesian3(-pointB.x, -pointB.y, -pointB.z) ); // 2. 创建绕 X 轴旋转 30° 的矩阵 const rotateX = Cesium.Matrix4.fromRotationX(Cesium.Math.toRadians(30)); // 3. 创建绕 Z 轴旋转 60° 的矩阵 const rotateZ = Cesium.Matrix4.fromRotationZ(Cesium.Math.toRadians(60)); // 4. 构建复合变换矩阵：T * Rz * Rx * T_inv // 顺序：先平移，再绕 X，再绕 Z，最后恢复原点 const matrix1 = Cesium.Matrix4.multiply(rotateZ, rotateX, new Cesium.Matrix4()); const matrix2 = Cesium.Matrix4.multiply(matrix1, translateToOrigin, new Cesium.Matrix4()); const compositeMatrix = Cesium.Matrix4.multiply(translateBack, matrix2, new Cesium.Matrix4()); // 或者更清晰的写法： let transform = Cesium.Matrix4.clone(Cesium.Matrix4.IDENTITY); transform = Cesium.Matrix4.multiply( Cesium.Matrix4.fromTranslation(pointB), Cesium.Matrix4.multiply( rotateZ, rotateX, Cesium.Matrix4.multiply( Cesium.Matrix4.fromTranslation(new Cesium.Cartesian3(-pointB.x, -pointB.y, -pointB.z)), Cesium.Matrix4.IDENTITY, new Cesium.Matrix4() ), new Cesium.Matrix4() ), transform ); // 应用变换 const rotatedPoint = Cesium.Matrix4.multiplyByPoint(transform, pointA, new Cesium.Cartesian3()); console.log('Original Point A:', pointA); console.log('Rotated Point:', rotatedPoint); // 可视化点 viewer.entities.add({ position: pointA, point: { pixelSize: 10, color: Cesium.Color.RED }, label: { text: 'A', font: '14px sans-serif', horizontalOrigin: Cesium.HorizontalOrigin.LEFT } }); viewer.entities.add({ position: pointB, point: { pixelSize: 10, color: Cesium.Color.GREEN }, label: { text: 'B', font: '14px sans-serif', horizontalOrigin: Cesium.HorizontalOrigin.LEFT } }); viewer.entities.add({ position: rotatedPoint, point: { pixelSize: 10, color: Cesium.Color.BLUE }, label: { text: "A'", font: '14px sans-serif', horizontalOrigin: Cesium.HorizontalOrigin.LEFT } }); viewer.camera.flyTo({ destination: Cesium.Rectangle.fromDegrees(-180, -90, 180, 90) }); ``` --- ## 🔍 代码解释 | 步骤 | 说明 | |------|------| | `Cesium.Matrix4.fromTranslation(...)` | 构建平移矩阵，用于将点移动到以 B 为原点 | | `Cesium.Matrix4.fromRotationX(...)` | 绕 X 轴旋转 30° | | `Cesium.Matrix4.fromRotationZ(...)` | 绕 Z 轴旋转 60° | | `Cesium.Matrix4.multiply(...)` | 将多个变换矩阵组合成一个复合变换 | | `Cesium.Matrix4.multiplyByPoint(...)` | 将点应用变换矩阵，得到旋转后的点 | --- ## ✅ 旋转顺序说明（重要） 在 Cesium 中，矩阵乘法是 **右乘**，即： ```javascript C = A * B ``` 表示先应用 **B**，再应用 **A**。 因此： ```javascript transform = T * Rz * Rx * T_inv ``` 表示： 1. `T_inv`: 先平移到以 B 为原点 2. `Rx`: 绕 X 轴旋转 3. `Rz`: 再绕 Z 轴旋转 4. `T`: 平移回原坐标系 --- ## ✅ 总结 | 功能 | 方法 | |------|------| | 平移矩阵 | `Cesium.Matrix4.fromTranslation(...)` | | X轴旋转 | `Cesium.Matrix4.fromRotationX(angle)` | | Z轴旋转 | `Cesium.Matrix4.fromRotationZ(angle)` | | 矩阵乘法 | `Cesium.Matrix4.multiply(A, B, result)` | | 点应用变换 | `Cesium.Matrix4.multiplyByPoint(matrix, point, result)` | --- ###