“我报名参加金石计划1期挑战——瓜分10万奖池,这是我的第1篇文章,点击查看活动详情”
3dtiles
3D Tiles是专为流式传输和渲染3D地理数据而设计的,如倾斜摄影测量、BIM、点云、建筑数据等。 英文介绍链接 github.com/CesiumGS/3d…
如何获取3dtiles
1.登录cesiumlab并且注册一个账号
www.cesiumlab.com/
2.选择通用模型切片,选择需要转换的模型文件的格式及文件,将右侧数据存储的类型选择为散列
3.
ENU 是一个使用局部原点的笛卡尔坐标系,沿 WGS84 椭球定向,且轴指向东方 (X)、北方 (Y) 和上方 (Z)。与 ECEF 相比, ENU 更便于操作三维模型,因为其 Z 轴与向上矢量重合。
在这里输入位置信息。选择输出路径进行处理。
在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,
});
旋转
通过矩阵运算进行旋转
//旋转
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…的文章才了解,非常感谢各位发文的大佬。然后本文章就在此基础上加了点东西。