Cesium 加载3dtiles数据

Cesium加载3dtiles数据，相对来说也是比较简单。

首先给定页面空间来展示3dtiles数据。

<div id="cesiumContainer"></div>

然后进行空间的绑定。

var viewer = new Cesium.Viewer("cesiumContainer");

可以这样简单的创建viewer，viewer是Cesium的一个核心类。

同时也可以再创建viewer的同时，初始化一些配置属性信息

var viewer = new Cesium.Viewer("cesiumContainer",{
    animation:false, //动画插件
    baseLayerPicker:false,
    geocoder:false,
    navigationHelpButton:false,
    timeline:false,
    fullscreenButton:false,
    homeButton:false,
    infoBox:true,
    scene3DOnly:true,//仅仅显示3d,可隐藏右上角2d和3d按钮
    selectionoIndicatr:false,
    navigationInstructionsInitiallyVisibl:false,
    useDefaultRenderLoop:true,
    showRenderLoopErrors:true,
    projectionPicker:false,//投影选择器
    vrButton:false
});

其他的选项还有很多，可以根据自己的要求来设置。

可以通过下面这个设置来控制Cesium的标识

viewer._cesiumWidget._creditContainer.style.display = "none";

Cesium可以加载不同的底图，当然可以不加载任何底图，在不加载任何底图的时候，底图呈现绿色。如果要修改颜色的话，可以通过设置底图为空，然后设置地球仪的基础颜色来改变。

首先设置imageryProvider为false，然后设置 scene.globe.baseColor ；

加载3dtiles

var tileset = window.viewer.scene.primitives.add(
    new Cesium.Cesium3DTileset({
        url: 'newifc/tileset.json'
    })
);

加载完数据后，可以自定义修改模型的位置。

//加载模型数据并定位到模型
var  params = {
    tx: 117.211047, //模型中心X轴坐标（经度，单位：十进制度）
    ty: 36.867497, //模型中心Y轴坐标（纬度，单位：十进制度）
    tz: 0, //模型中心Z轴坐标（高程，单位：米）
    rx: 0, //X轴（经度）方向旋转角度（单位：度）
    ry: 0, //Y轴（纬度）方向旋转角度（单位：度）
    rz: 0 //Z轴（高程）方向旋转角度（单位：度）
};

tileset.readyPromise
    .then(function() {
        var boundingSphere = tileset.boundingSphere
        window.viewer.camera.viewBoundingSphere(boundingSphere, new Cesium.HeadingPitchRange(0.0, -0.5, boundingSphere.radius))
        window.viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
        //修改经纬度位置
        tileset._root.transform = update3dtilesMaxtrix(params);
        viewer.zoomTo(tileset);
    })
    .otherwise(function(error) {
        throw error
    });

function update3dtilesMaxtrix(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);

    var scale = Cesium.Matrix4.fromUniformScale(0.85);
    // //缩放
    Cesium.Matrix4.multiply(m, scale, m);
    //旋转、平移矩阵相乘
    Cesium.Matrix4.multiply(m, rotationX, m);
    Cesium.Matrix4.multiply(m, rotationY, m);
    Cesium.Matrix4.multiply(m, rotationZ, m);
    //赋值给tileset
    return m;
}

 

同时也可以设置视图位置：

viewer.scene.camera.setView({
    destination: new Cesium.Cartesian3(-2336087.4304109886,4543403.498943987,3815668.7985073784),
    orientation: {
        heading: 1.8657777042174768,
        pitch: -0.24985098126065886,
        roll: 0.0031798578798047927
    }
});

模型数据加载后，仔细观察，模型位置会根据视角的转动而移动。

可以通过viewer.scene.globe.depthTestAgainstTerrain = true；来控制。

至此，Cesium加载3dtiles模型数据，基本完成了。