cesium-3dtile模型导入并设置位置

1,006 阅读2分钟

“我报名参加金石计划1期挑战——瓜分10万奖池,这是我的第1篇文章,点击查看活动详情

3dtiles

3D Tiles是专为流式传输和渲染3D地理数据而设计的,如倾斜摄影测量、BIM、点云、建筑数据等。 英文介绍链接 github.com/CesiumGS/3d…

如何获取3dtiles

1.登录cesiumlab并且注册一个账号

www.cesiumlab.com/ 1.png 2.选择通用模型切片,选择需要转换的模型文件的格式及文件,将右侧数据存储的类型选择为散列

2.png 3. ENU 是一个使用局部原点的笛卡尔坐标系,沿 WGS84 椭球定向,且轴指向东方 (X)、北方 (Y) 和上方 (Z)。与 ECEF 相比, ENU 更便于操作三维模型,因为其 Z 轴与向上矢量重合。 在这里输入位置信息。选择输出路径进行处理。 3.png

在cesium中使用3dtiles

通过Cesium.Cesium3DTileset创建3dtiles

    var params = {
        url:url, //模型的url
        lng:x,//经度
        lat:y,//纬度
        height:height,//高
        rotationX:rx,//旋转x
        rotationY:ry,//旋转y
        rotationZ:rz,//旋转z  
      };
      //加载3dtiles
    const tileset = new Cesium.Cesium3DTileset({
        url:params.url,
        show:true,
    });

旋转

参考链接 cesium.xin/wordpress/a…

通过矩阵运算进行旋转

      //旋转
      var mx = Cesium.Matrix3.fromRotationX(Cesium.Math.toRadians(params.rotationX));
      var my = Cesium.Matrix3.fromRotationY(Cesium.Math.toRadians(params.rotationY));
      var mz = Cesium.Matrix3.fromRotationZ(Cesium.Math.toRadians(params.rotationZ));
      var rotationX = Cesium.Matrix4.fromRotationTranslation(mx);
      var rotationY = Cesium.Matrix4.fromRotationTranslation(my);
      var rotationZ = Cesium.Matrix4.fromRotationTranslation(mz);
      //平移
      var position = Cesium.Cartesian3.fromDegrees(params.lng, params.lat, params.height);
      var m = Cesium.Transforms.eastNorthUpToFixedFrame(position);
      //旋转、平移矩阵相乘
      Cesium.Matrix4.multiply(m, rotationX, m);
      Cesium.Matrix4.multiply(m, rotationY, m);
      Cesium.Matrix4.multiply(m, rotationZ, m);
      tileset._root.transform = m;

整合一下

import * as Cesium from "cesium";
export default function load3dtiles(viewer,url,x,y,height,rx,ry,rz){
    var params = {
        url:url,
        lng:x,
        lat:y,
        height:height,
        rotationX:rx,
        rotationY:ry,
        rotationZ:rz,
      
      };
function add3DTilesetModle(viewer,params){
    const tileset = new Cesium.Cesium3DTileset({
        url:params.url,
        show:true,
    });
    //异步加载  
    tileset.readyPromise.then(function (tileset) {
      //旋转
      var mx = Cesium.Matrix3.fromRotationX(Cesium.Math.toRadians(params.rotationX));
      var my = Cesium.Matrix3.fromRotationY(Cesium.Math.toRadians(params.rotationY));
      var mz = Cesium.Matrix3.fromRotationZ(Cesium.Math.toRadians(params.rotationZ));
      var rotationX = Cesium.Matrix4.fromRotationTranslation(mx);
      var rotationY = Cesium.Matrix4.fromRotationTranslation(my);
      var rotationZ = Cesium.Matrix4.fromRotationTranslation(mz);
      //平移
      var position = Cesium.Cartesian3.fromDegrees(params.lng, params.lat, params.height);
      var m = Cesium.Transforms.eastNorthUpToFixedFrame(position);
      //旋转、平移矩阵相乘
      Cesium.Matrix4.multiply(m, rotationX, m);
      Cesium.Matrix4.multiply(m, rotationY, m);
      Cesium.Matrix4.multiply(m, rotationZ, m);
      //赋值给tileset
      tileset._root.transform = m;
      viewer.scene.primitives.add(tileset);
      //跳转
      viewer.zoomTo(tileset);
    });
    return tileset;
}
add3DTilesetModle(viewer,params)
return viewer
    
}

使用

import上述

import load3d from "@/function/load3dtiles"
 load3d(viewer,url,经度,纬度,高度,rx,ry,rz)

刚开始接触cesium时也不知道怎么调整位置,当时看了juejin.cn/post/713319…的文章才了解,非常感谢各位发文的大佬。然后本文章就在此基础上加了点东西。