cesium primitive 移动 缩放 旋转 矩阵

旋转参考:cesium 指定点旋转rectangle Primitive方式 矩阵篇-CSDN博客

平移参考:cesium 调整3dtiles的位置 世界坐标下 相对坐标下 平移矩阵-CSDN博客

一、primitive方式添加polygon
javascript 复制代码
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);

二、平移

以p1为原点,将p1移动到(113.392209, 38.095546),其他几个点相对p1移动

javascript 复制代码
let origin = Cesium.Cartesian3.fromDegrees(...p1);
            let offset = Cesium.Cartesian3.fromDegrees(
                113.392209, 38.095546
            );
            let translate = Cesium.Cartesian3.subtract(
                offset,
                origin,
                new Cesium.Cartesian3()
            );

            polygonPrimitive.modelMatrix = Cesium.Matrix4.fromTranslation(translate)

三、缩放

以p1为原点,在x轴方向缩放2倍大小

javascript 复制代码
let origin = Cesium.Cartesian3.fromDegrees(...p1);
            let localMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(origin);
            let inverseMatrix = Cesium.Matrix4.inverse(localMatrix, new Cesium.Matrix4);

            let scaleMatrix = Cesium.Matrix4.fromScale(new Cesium.Cartesian3(2, 1, 1));
            let modelMatrix = Cesium.Matrix4.multiply(scaleMatrix, inverseMatrix, new Cesium.Matrix4);

            polygonPrimitive.modelMatrix = Cesium.Matrix4.multiply(localMatrix, modelMatrix, new Cesium.Matrix4);
相关推荐
时间的情敌6 小时前
Cesium 流动管线、管道动画、管线流向仿真,管网、油气、水利孪生高频需求
前端·交互·cesium
总要学点什么9 小时前
第105篇:三维特效-流动图片墙体效果——让箭头沿墙长滚,它俩竟是同一份代码
开发语言·javascript·ecmascript·gis·webgl·材质·cesium
总要学点什么11 小时前
第104篇:三维特效-流动墙体效果——让贴图沿墙流动,它却只肯走一条对角线
开发语言·javascript·ecmascript·gis·webgl·材质·cesium
时间的情敌3 天前
Cesium 建筑单体化、3DTiles 分类、楼层显隐、分户高亮(BIM + 倾斜孪生高频)
前端·3d·cesium
总要学点什么3 天前
第96篇:三维数据加载-城市建筑白模样式+着色器——让色带按体量上色,最白的那档却涂不上去
前端·gis·webgl·cesium·着色器·空间分析·白模
总要学点什么4 天前
第97篇:三维数据加载-城市建筑白模自定义着色器——让一条光带沿高度扫上去,快慢却由帧率说了算
前端·gis·webgl·cesium·着色器·空间分析·白模
我喜欢就喜欢6 天前
倾斜摄影 OSGB 进 Cesium 对不齐?先核 SRS、原点偏移和瓦片路径
gis·cesium·倾斜摄影·osgb·3d tiles
时间的情敌7 天前
Cesium 加载 3D Tiles 倾斜摄影、压平、样式设置(Vue3 实战)
vue.js·3d·cesium
时间的情敌11 天前
Vue3 + Cesium 实战:本地上传 GLB 模型、模型上叠加 GLB、点击控制透明度
前端·vue.js·cesium
LuHang12 天前
从天地图切换到高德地图:一次真实的底图迁移实战
前端·vue.js·cesium