Cesium学习笔记——Cesium加载3dtiles数据并调整大小、高度、位置

最新推荐文章于 2024-05-31 15:41:42 发布

蹲在草丛嚼益达

最新推荐文章于 2024-05-31 15:41:42 发布

阅读量1.7k

点赞数 10

分类专栏： Cesium学习笔记文章标签：学习笔记 3d html5 javascript vue.js

本文链接：https://blog.csdn.net/weixin_44985485/article/details/111305527

版权

Cesium学习笔记专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文介绍了如何在Cesium中加载3DTiles数据，以及如何单独调整模型的高度、进行平移、高程和旋转等变换操作。作者提供了代码示例，展示了如何利用CesiumAPI实现这些功能。

摘要由CSDN通过智能技术生成

1、加载3dtiles数据

// 3Dtiles数据加载
export const load3Dtiles = function(viewer) {
    //开启地下可视化
    // viewer.scene.globe.translucency.frontFaceAlphaByDistance = new Cesium.NearFarScalar(1000.0,0.0,2000.0,1.0);
    // viewer.scene.globe.translucency.enabled = true;
    //开启高程遮挡模型（默认不开启）
    // viewer.scene.globe.depthTestAgainstTerrain = true;
    //添加geojson格式地理数据
    Cesium.Math.setRandomNumberSeed(0);
    var tilesetModel = new Cesium.Cesium3DTileset({
        url: "http://42.192.234.10:36000/Cesium/drone/test/tileset.json",//本地引用
        // url: "http://42.192.234.10:36000/cesium/buildings/chengdu/tileset.json",//服务器引用
        // maximumScreenSpaceError: 2,        //最大的屏幕空间误差
        // maximumNumberOfLoadedTiles: 1000,  //最大加载瓦片个数
      });
    viewer.scene.primitives.add(tilesetModel);
}

	//飞往模型位置
    viewer.flyTo(tilesetModel);

2、单独调整模型高度

//根据地形设置调整高度
var height = -50;//设置高度调整参数
tilesetModel.readyPromise.then(function(argument) {
    var cartographic = Cesium.Cartographic.fromCartesian(tilesetModel.boundingSphere.center);
    var surface = Cesium.Cartesian3.fromRadians(cartographic.longitude,cartographic.latitude, cartographic.height);
    var offset = Cesium.Cartesian3.fromRadians(cartographic.longitude,cartographic.latitude, cartographic.height + height);
    var translation = Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3());
    argument.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
})

3、调整模型多个变化参数（平移、高程、旋转）

此处有坑，若直接使用tilesetModel._root，会发现提示 _root 未定义（undefine），只能采用tilesetModel.readyPromise.then(function(argument) { argument._root }的方式调用。

//根据地形设置调整高度
var height = -50;
tilesetModel.readyPromise.then(function(argument) {
    if (argument._root == undefined) {
        console.log("瓦片未变换");
    }else{
        console.log("瓦片变换");
        var m = update3dtilesMaxtrix(params)
        console.log("m",m);
        argument._root.transform = m;
        // viewer.zoomTo(tileset);
    }
})

//定义变换参数
let params = {
    tx: 113.062781,  //模型中心X轴坐标（经度，单位：十进制度）
    ty: 22.647802,    //模型中心Y轴坐标（纬度，单位：十进制度）
    tz: -30,    //模型中心Z轴坐标（高度，单位：米）
    rx: 0,    //X轴（经度）方向旋转角度（单位：度）圆心应该是在地心，改动其中一个值的时候，不止变化了该变量，比如改动ry，模型的高度也有了显著上升
    ry: 0,    //Y轴（纬度）方向旋转角度（单位：度）
    rz: 3      //Z轴（高程）方向旋转角度（单位：度）
};

function update3dtilesMaxtrix(params) {
    //旋转
    let mx = Cesium.Matrix3.fromRotationX(Cesium.Math.toRadians(params.rx));
    let my = Cesium.Matrix3.fromRotationY(Cesium.Math.toRadians(params.ry));
    let mz = Cesium.Matrix3.fromRotationZ(Cesium.Math.toRadians(params.rz));
    let rotationX = Cesium.Matrix4.fromRotationTranslation(mx);
    let rotationY = Cesium.Matrix4.fromRotationTranslation(my);
    let rotationZ = Cesium.Matrix4.fromRotationTranslation(mz);
    //平移
    let position = Cesium.Cartesian3.fromDegrees(params.tx, params.ty, params.tz);
    let m = Cesium.Transforms.eastNorthUpToFixedFrame(position);

    let scale = Cesium.Matrix4.fromUniformScale(1.34);
    //缩放
    Cesium.Matrix4.multiply(m, scale, m);
    console.log("m1",m);
    //旋转、平移矩阵相乘
    Cesium.Matrix4.multiply(m, rotationX, m);
    console.log("m2",m);
    Cesium.Matrix4.multiply(m, rotationY, m);
    console.log("m3",m);
    Cesium.Matrix4.multiply(m, rotationZ, m);
    console.log("m4",m);
    //返回给tileset的赋值
    return m;
}