cesium 指定点旋转rectangle Primitive方式 矩阵篇

56 篇文章 1 订阅

cesium中rectangle是水平垂直于正北方向的,rectangle的属性中有rotation,但是rotation是以矩形的中心点进行旋转的,旋转过程中矩形的形状可能会变形,如果需要以矩形的顶点为原点进行旋转,可以采用primitive的方式添加polygon,并设置polygon的矩阵。

用entity的方式参考cesium 指定点旋转rectangle entity方式 坐标篇-CSDN博客

一、primitive的方式添加polygon

 let p1 = [113.389, 38.094669];
        let p2 = [113.390968, 38.095338];


// 通过矩形的2个点,得到多边形的四个点
            let polygonInstance = new Cesium.GeometryInstance({
                geometry: Cesium.PolygonGeometry.fromPositions({
                    positions: Cesium.Cartesian3.fromDegreesArray([
                        ...p1,
                        p2[0], p1[1],
                        ...p2,
                        p1[0], p2[1]
                    ]),
                    height: 0,
                    vertexFormat: Cesium.EllipsoidSurfaceAppearance.VERTEX_FORMAT
                }),
                attributes: {
                    color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.fromCssColorString('#00ff00').withAlpha(0.5))
                }
            });
            let polygonPrimitive = new Cesium.Primitive({
                geometryInstances: [polygonInstance],
                undisplayable: true,
                appearance: new Cesium.PerInstanceColorAppearance({
                    flat: true,
                    translucent: false
                })
            });

            viewer.scene.primitives.add(polygonPrimitive);

二、设置polygon的矩阵,以p1为原点顺时针旋转30度

let center = Cesium.Cartesian3.fromDegrees(...p1);
            let localToWorld_Matrix = Cesium.Transforms.eastNorthUpToFixedFrame(center);
            let worldToLocal_Matrix = Cesium.Matrix4.inverse(localToWorld_Matrix, new Cesium.Matrix4);

            let rotationZ = Cesium.Matrix3.fromRotationZ(Cesium.Math.toRadians(r));
            let rotationMatrix = Cesium.Matrix4.fromRotation(rotationZ);

            let localRotationMatrix = Cesium.Matrix4.multiply(rotationMatrix, worldToLocal_Matrix, new Cesium.Matrix4);
            let worldMatrix = Cesium.Matrix4.multiply(localToWorld_Matrix, localRotationMatrix, new Cesium.Matrix4);

            polygonPrimitive.modelMatrix = worldMatrix;

 代码解析:Cesium.Matrix3.fromRotationZ(Cesium.Math.toRadians(-30));

  1. cesium中z轴是向上的,所以面对着屏幕以p1为原点旋转需要调用用fromRotationZcesium mapboxgl+threebox glb 朝向问题 坐标轴方向_threebox z轴向上-CSDN博客
  2. fromRotationZ()指向正方向为逆时针方向,所以以p1为原点顺时针旋转30度的时候传入角度是-30

  • 12
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 要旋转Cesium中的Primitive,可以使用Cesium中的Matrix4库。以下是一个旋转Primitive的示例代码: ```javascript // 获取Primitive的变换矩阵 var primitiveMatrix = primitive.modelMatrix; // 计算旋转矩阵 var rotationMatrix = Cesium.Matrix4.fromRotationTranslation( Cesium.Matrix3.fromRotationZ(Cesium.Math.toRadians(45.0)) ); // 将旋转矩阵应用到Primitive上 var newMatrix = Cesium.Matrix4.multiply( primitiveMatrix, rotationMatrix, new Cesium.Matrix4() ); primitive.modelMatrix = newMatrix; ``` 在上面的代码中,我们首先获取了Primitive的变换矩阵。然后,我们使用Cesium中的Matrix3.fromRotationZ方法创建一个绕Z轴旋转45度的旋转矩阵。接着,我们使用Cesium中的Matrix4.multiply方法将旋转矩阵应用到Primitive的变换矩阵上,得到一个新的变换矩阵。最后,我们将新的变换矩阵赋值给Primitive的modelMatrix属性,从而完成旋转操作。 你可以根据需要调整旋转角度和轴向来适应你的场景。 ### 回答2: Cesium中的Primitive是指一种基本的几何图形,可以通过旋转操作来改变其方向和位置。 在Cesium中,旋转形状可以通过使用Cesium的Matrix4和Quaternion对象来实现。通过Matrix4对象可以进行基于角度的旋转,而通过Quaternion对象可以进行基于四元数的旋转。使用Matrix4时,可以利用其rotate函数来实现对Primitive图形的旋转操作。 要对Primitive图形进行旋转,需要传入旋转的角度和旋转轴向量。例如,如果想绕z轴旋转Primitive图形,可以使用以下代码: ``` var rotationAngle = Cesium.Math.toRadians(45); // 将角度转换为弧度 var rotationAxis = new Cesium.Cartesian3(0, 0, 1); // 定义旋转轴向量,这里选择z轴 var rotationMatrix = Cesium.Matrix4.fromRotationTranslation( Cesium.Matrix3.fromRotationZ(rotationAngle), Cesium.Cartesian3.ZERO ); // 创建旋转矩阵 primitive.modelMatrix = rotationMatrix; // 应用旋转矩阵 ``` 以上代码将会将Primitive图形绕z轴旋转45度。只需根据需求改变旋转角度和旋转轴向量即可实现各式各样的旋转效果。 需要注意的是,Cesium中的旋转操作是基于局部坐标系的。因此,在对Primitive图形应用旋转矩阵之前,可能需要先对Primitive图形进行平移操作,将其置于正确的位置。 总之,Cesium中的Primitive图形可以通过Matrix4和Quaternion对象来实现旋转操作。利用旋转角度和旋转轴向量,可以实现各种不同的旋转效果。 ### 回答3: Cesium 是一个开源的 JavaScript 库,用于创建地球上的三维图形和地理信息系统。在 Cesium 中,Primitive 是一个用于渲染和显示图形的基本对象,可以包括、线、多边形等等。 在 Cesium 中,可以通过使用旋转矩阵来实现 Primitive旋转旋转矩阵是一个 3x3 的矩阵,它可以通过改变 Primitive的位置来实现旋转。 在旋转之前,我们需要确定旋转的中心旋转角度。中心可以是一个指定的坐标,而旋转角度可以是以弧度为单位的一个实数。 在 Cesium 中,可以使用 TransformMatrix3D 进行旋转操作。TransformMatrix3D 实例包含了一个矩阵和一个变换后的位置。旋转操作可以通过下面的代码来进行操作: ```javascript // 创建一个需要旋转的三角形 Primitive var primitive = new Cesium.Primitive({ geometryInstances: [new Cesium.GeometryInstance({ geometry: new Cesium.PolygonGeometry({ polygonHierarchy: new Cesium.PolygonHierarchy(Cesium.Cartesian3.fromDegreesArray([ -75.0, 45.0, -125.0, 35.0, -125.0, 55.0 ])) }), attributes: { color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.RED) } })], appearance: new Cesium.PerInstanceColorAppearance() }); // 旋转的角度和中心 var angle = Cesium.Math.toRadians(45); var rotationCenter = Cesium.Cartesian3.fromDegrees(-100.0, 45.0); // 构造旋转矩阵 var rotationMatrix = Cesium.Matrix3.fromRotationZ(angle); // 构造包含旋转矩阵和位置的 TransformMatrix3D var transformMatrix = new Cesium.Matrix4.fromRotationTranslation( rotationMatrix, rotationCenter ); // 应用旋转 Cesium.Matrix4.multiply( transformMatrix, primitive.modelMatrix, primitive.modelMatrix ); ``` 通过以上代码,我们可以将一个三角形计算其旋转并显示在地球上。 总的来说,CesiumPrimitive 旋转主要是通过使用旋转矩阵和变换矩阵来改变 Primitive 的位置和姿态来实现的。这使得我们可以在三维场景中自定义和控制图形的旋转效果。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值