cesium入门(三)添加3D Tiles,并调整位置,贴地

一、3D Tiles是什么

3D Tiles数据集以分块、分级渲染,将大数据量三维数据以分块、分层形式组织起来,可以大量减轻浏览器和GPU的负担,3D Tiles包括建筑物、树木、点云和矢量数据。

二、加载3D Tiles数据集

设计步骤:

  1. 创建平移矩阵
  2. 加载模型数据
  3. 设置相机视角
  4. 调整高度

或者

  1. 创建平移矩阵(动态创建参数)
  2. 加载模型数据
  3. 设置相机视角

获取偏移量:
在这里插入图片描述

加载平移矩阵:

方法一:动态加载modelMatrix
创建平移矩阵的两种方法:

	//创建平移矩阵方法一
    m = Cesium.Matrix4.fromArray([
        1.0, 0.0, 0.0, 0.0,
        0.0, 1.0, 0.0, 0.0,
        0.0, 0.0, 1.0, 0.0,
        x, y, z, 1.0
    ]);

    //创建平移矩阵方法二
    var translation=Cesium.Cartesian3.fromArray([x, y, z]);
    m= Cesium.Matrix4.fromTranslation(translation);

    document.getElementById("result").innerText = "x:" + x + " y:" + y + " z:" + z;

    tileset.modelMatrix = m;

平移矩阵modelMatrix的获得是直接通过设置m矩阵,动态的调整x,y,z的大小,来得到不同的modelMatrix

var x = 360.0;
var y = -920.0;
var z = -820.0;
// var x = 0;
// var y = 0;
// var z = 0;
var m = Cesium.Matrix4.fromArray([
    1.0, 0.0, 0.0, 0.0,
    0.0, 1.0, 0.0, 0.0,
    0.0, 0.0, 1.0, 0.0,
    x, y, z, 1.0
]);

var tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
    url: 'Scene/testm3DTiles.json',
    maximumScreenSpaceError: 2,
    maximumNumberOfLoadedTiles: 1000,
    modelMatrix: m  //方法一,动态修改modelMatrix
}));

方法二,直接调用函数,调整高度,height表示物体离地面的高度
偏移矩阵modelMatrix可以由一个translation来确定,通过调整height来获得不同的modelMatrix,然后视角缩放到瓦片集的时候调用changeHeight函数。

function zoomToTileset() {
    boundingSphere = tileset.boundingSphere;
    viewer.camera.viewBoundingSphere(boundingSphere, new Cesium.HeadingPitchRange(0, -2.0, 0));
    viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);

    changeHeight(0);
}
// tileset数据加载好后,便缩放相机视角
tileset.readyPromise.then(zoomToTileset);

...

function changeHeight(height) {
    height = Number(height);
    if (isNaN(height)) {
        return;
    }
    
    var cartographic = Cesium.Cartographic.fromCartesian(tileset.boundingSphere.center);
    var surface = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, cartographic.height);
    var offset = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude,height);
    var translation = Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3());
    tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
}
}));

数据的加载

var tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
    url: 'Scene/testm3DTiles.json',
    maximumScreenSpaceError: 2,
    maximumNumberOfLoadedTiles: 1000,
    //modelMatrix: m 
}));

完整程序:3D Tiles

发布了57 篇原创文章 · 获赞 19 · 访问量 4万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览