对载入的3dtiles进行旋转、平移和缩放变换。

使用

javascript 复制代码
params: {
      tx: 129.75845, //模型中心X轴坐标(经度,单位:十进制度)//小左
      ty: 46.6839, //模型中心Y轴坐标(纬度,单位:十进制度)//小下
      tz: 28, //模型中心Z轴坐标(高程,单位:米)
      rx: 0, //X轴(经度)方向旋转角度(单位:度)
      ry: 0, //Y轴(纬度)方向旋转角度(单位:度)
      rz: 1.6, //Z轴(高程)方向旋转角度(单位:度)小右
      scale: 0.8 //缩放比例
    },
  promise.then((result) => {
     this.update3dtilesMaxtrix(result, params) //改变位置
}

源码

javascript 复制代码
 update3dtilesMaxtrix(tileset, params) {
    //旋转
    var mx = Cesium.Matrix3.fromRotationX(Cesium.Math.toRadians(params.rx))
    var my = Cesium.Matrix3.fromRotationY(Cesium.Math.toRadians(params.ry))
    var mz = Cesium.Matrix3.fromRotationZ(Cesium.Math.toRadians(params.rz))
    var rotationX = Cesium.Matrix4.fromRotationTranslation(mx)
    var rotationY = Cesium.Matrix4.fromRotationTranslation(my)
    var rotationZ = Cesium.Matrix4.fromRotationTranslation(mz)
    //平移
    var position = Cesium.Cartesian3.fromDegrees(params.tx, params.ty, params.tz)
    var m = Cesium.Transforms.eastNorthUpToFixedFrame(position)
    //旋转、平移矩阵相乘
    Cesium.Matrix4.multiply(m, rotationX, m)
    Cesium.Matrix4.multiply(m, rotationY, m)
    Cesium.Matrix4.multiply(m, rotationZ, m)
    //比例缩放
    var scale = Cesium.Matrix4.fromUniformScale(params.scale)
    Cesium.Matrix4.multiply(m, scale, m)
    console.log('矩阵m:', m)
    //赋值给tileset
    tileset._root.transform = m
  },

这段代码展示了如何在 CesiumJS 中为一个 3D Tiles 模型应用旋转、平移和缩放变换,并通过 tileset._root.transform 将最终的变换矩阵应用到模型的根节点(_root)。我将逐步解析代码的作用,并解释它如何组合成一个变换矩阵来影响模型的变换。

代码解析:

1. 旋转变换:
javascript 复制代码
var mx = Cesium.Matrix3.fromRotationX(Cesium.Math.toRadians(params.rx));
var my = Cesium.Matrix3.fromRotationY(Cesium.Math.toRadians(params.ry));
var mz = Cesium.Matrix3.fromRotationZ(Cesium.Math.toRadians(params.rz));
  • 这里首先为 X、Y 和 Z 轴上的旋转创建了三个 3x3 旋转矩阵 。params.rx、params.ry 和 params.rz 分别表示绕 X、Y 和 Z 轴旋转的角度,单位是度。Cesium.Math.toRadians() 将角度转换为弧度,因为 Cesium 使用弧度作为角度单位。
javascript 复制代码
var rotationX = Cesium.Matrix4.fromRotationTranslation(mx);
var rotationY = Cesium.Matrix4.fromRotationTranslation(my);
var rotationZ = Cesium.Matrix4.fromRotationTranslation(mz);
  • Cesium.Matrix4.fromRotationTranslation() 用旋转矩阵 mx、my 和 mz 构建 4x4 变换矩阵,这样可以保持原始矩阵的 3x3 部分用于旋转,最后的平移部分默认为零,因为我们现在只关心旋转。
2. 平移变换:
javascript 复制代码
var position = Cesium.Cartesian3.fromDegrees(params.tx, params.ty, params.tz);
var m = Cesium.Transforms.eastNorthUpToFixedFrame(position);
  • params.tx、params.ty 和 params.tz 分别是模型在 经纬度坐标系 中的平移量(经度、纬度、高度),单位是度。Cesium.Cartesian3.fromDegrees() 将这些经纬度值转换为 Cartesian3 坐标系中的坐标。
  • Cesium.Transforms.eastNorthUpToFixedFrame(position) 返回一个 从指定位置到地球坐标系的变换矩阵。这个矩阵将模型的局部坐标系(East-North-Up 坐标系)转换为世界坐标系(FixedFrame)。它用于将模型从地理坐标系中转换到地球固定坐标系中。
3. 旋转和平移矩阵的组合:
javascript 复制代码
Cesium.Matrix4.multiply(m, rotationX, m);
Cesium.Matrix4.multiply(m, rotationY, m);
Cesium.Matrix4.multiply(m, rotationZ, m);
  • 通过多次调用 Cesium.Matrix4.multiply(),将平移矩阵 m 和旋转矩阵(rotationX、rotationY 和 rotationZ)依次相乘。矩阵乘法遵循从右到左的顺序,即首先应用绕 Z 轴的旋转,然后是绕 Y 轴的旋转,最后是绕 X 轴的旋转。
4. 缩放变换:
javascript 复制代码
var scale = Cesium.Matrix4.fromUniformScale(params.scale);
Cesium.Matrix4.multiply(m, scale, m);
  • Cesium.Matrix4.fromUniformScale(params.scale) 创建一个均匀缩放矩阵,其中 params.scale 是缩放因子。均匀缩放表示在所有轴上使用相同的比例因子。
  • Cesium.Matrix4.multiply(m, scale, m) 将缩放矩阵应用到之前的变换矩阵 m 上,完成缩放操作。
5. 最终矩阵应用到模型:
javascript 复制代码
tileset._root.transform = m;
  • 最终的变换矩阵 m 包含了平移、旋转和缩放的综合变换。tileset._root.transform 是 3D Tiles 模型根节点的变换矩阵,通过设置这个矩阵来应用变换,从而影响整个模型或场景的显示。

变换矩阵组合的顺序:

在这个代码中,变换是按以下顺序应用的:

  1. 平移 :首先将模型平移到指定的位置(position)。
  2. 旋转:接下来按指定角度绕 X、Y、Z 轴分别旋转模型。
  3. 缩放:最后应用一个均匀的缩放因子,改变模型的大小。

通过这种顺序,我们可以精确地控制模型的位置、方向和大小。

代码的作用总结:

这段代码实际上是在计算一个 综合的变换矩阵 ,它包括了平移、旋转和缩放,并将该矩阵应用到模型的根节点上,从而影响整个模型的显示。通过调整 params 对象中的参数,你可以控制模型的最终位置、方向和尺寸。

  • params.rx、params.ry、params.rz:控制旋转的角度。
  • params.tx、params.ty、params.tz:控制平移的经度、纬度和高度。
  • params.scale:控制模型的缩放因子。

最终,通过这种方式,模型将按照指定的变换在 Cesium 中呈现。

相关推荐
Solange__1 天前
影视预演怎么用AI生成3D场景?从分镜、Blockout到镜头交付的完整流程
人工智能·游戏·3d·ai·自然语言处理·aigc·游戏策划
小贺儿开发1 天前
《长征 · 征途》Unity 三维互动沙盘
科技·3d·unity·1024程序员节·地形·互动·沙盘
Solange__1 天前
文旅景区怎么用AI生成3D导览?从航拍采集、地标重建到网页漫游的完整方案
人工智能·3d·语言模型·自然语言处理·材质·贴图·1024程序员节
Jmyd01232 天前
3D 扫描仪选型技术拆解:精度、点云与软件链路
人工智能·算法·3d·三维数字化
sbjdhjd2 天前
从参考图到可复用门窗:3ds Max 建筑场景建模的比例校准与结构拆分
3d·图形渲染·3dsmax·几何学·建模·三维建模·3dcoat
图特摩斯科技2 天前
本体建模方式升级:OntoStudio 独创,2D vs 3D 构建本体应用
数据库·3d
总要学点什么2 天前
第75篇:右键菜单控件——把一张会做事的菜单钉在鼠标落下的那点
前端·信息可视化·echarts·cesium·空间分析
云飞云共享云桌面3 天前
广东东莞制造工厂10人共享一台三维设计服务器
运维·服务器·3d·自动化·制造
七仔啊3 天前
多视角深度重建
3d
DolitD3 天前
国产信创+实时云渲染:数字孪生智慧矿山UE5流畅推流
3d·信息可视化·云计算·图形渲染·数据可视化