添加 3D Tiles,并调整位置

3D Tiles 是什么

3DTiles数据集是cesium小组AnalyticlGraphics与2016年3月定义的一种数据集,3DTiles数据集以分块、分级渲染,将大数据量三维数据以分块,分层的形式组织起来,可以大量减轻浏览器和GPU的负担是一个优秀的,并且格式公开的数据格式。

3D Tiles将用于流式传输3D内容,包括建筑物,树木,点云和矢量数据。

参考 官网 3dtiles 介绍

3D Tiles

3D Tiles将用于流式传输3D内容,包括建筑物,树木,点云和矢量数据。

contextCapture 可以将无人机成果转换成Cesium支持的倾斜摄影成果,当前例子就是使用的这种成果。

数据的加载比较简单

var tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
url: url, //数据路径
maximumScreenSpaceError: 2, //最大的屏幕空间误差
maximumNumberOfLoadedTiles: 1000, //最大加载瓦片个数
modelMatrix: m //形状矩阵
}));

但是问题在于生成的数据不一定是落在地面上,有可能是浮在空中的,例如:

这并不是我们想要的,我们希望拍摄的成果能贴到地面上,和地图能很好的融合在一起,类似这样

由于单个瓦片的位置信息是写到了数据中的(.b3dm和对应的json文件中),如果能整体调整加载后的tileset,就会是最好的选择,这里就要提到本文的主角:

modelMatrix

通过查看API文档,我们发现Cesium3DTile里面有一个属性,可以更改位置(当然通过查看源码也可以查这个)

transform : Matrix4              Scene/Cesium3DTile.js 88
The local transform of this tile

说明通过矩阵运算是可以调整整个数据的显示位置的

以下说明矩阵平移的情况:

1. 自己获取偏移量

参考《WebGl编程指南》的第三章第四章

Tx,Ty,Tz就是我们需要设置的 x,y,z方向上的平移距离

由于Cesium的矩阵是列主序的,所以这里写成

//创建平移矩阵方法一
// 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); //生效
tileset._modelMatrix = m;

这里我们只需要不断的修改 x,y,z,就可以调整物体的位置了

获取 x,y,z 之后,在加载3D Tiles 时将modelMatrix 设置成目标 x,y,z值,就完成了

2.计算偏移量

官方示例 3D Tiles Adjust Height

一步到位

//方法二,直接调用函数,调整高度,height表示物体离地面的高度
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);
}

参考代码:lesson02

cesium编程入门(六)添加 3D Tiles,并调整位置,贴地的更多相关文章

  1. cesium编程入门(六)添加 3D Tiles,并调整位置,贴地

    添加 3D Tiles,并调整位置 3D Tiles 是什么 3DTiles数据集是cesium小组AnalyticlGraphics与2016年3月定义的一种数据集,3DTiles数据集以分块.分级 ...

  2. cesium编程入门(七)3D Tiles,模型旋转

    cesium编程入门(七)3D Tiles,模型旋转 上一节介绍了3D Tiles模型的位置移动,和贴地的操作,这一节来聊一聊模型的旋转, 参考<WebGl编程指南>的第四章 假设在X轴和 ...

  3. cesium编程入门(七)3D Tiles,模型旋转

    cesium编程入门(七)3D Tiles,模型旋转 上一节介绍了3D Tiles模型的位置移动,和贴地的操作,这一节来聊一聊模型的旋转, 参考<WebGl编程指南>的第四章 假设在X轴和 ...

  4. cesium编程中级(一)添加示例到Sandcastle

    cesium编程中级(一)添加示例到Sandcastle 添加示例到Sandcastle在cesium编程入门(七)3D Tiles,模型旋转中提到过,这里是一份完整的说明 创建例子 开启node服务 ...

  5. cesium编程入门(一)cesium简介

    cesium编程入门 cesium是什么 Cesium 是一个跨平台.跨浏览器的展示三维地球和地图的 javascript 库. Cesium 使用WebGL 来进行硬件加速图形,使用时不需要任何插件 ...

  6. cesium编程入门(九)实体 Entity

    cesium编程入门(九)实体 Entity 在cesium编程入门(五)绘制形状提到过添加实体的方法,这一节聊一聊实体相关的一些内容: 先来看 Entity 的各个属性 id 唯一标志,如果没设置, ...

  7. cesium编程入门(八)设置材质

    cesium编程入门(八)设置材质 Cesium中为几何形状设置材质有多种方法 第一种方法 Material 直接构建Cesium.Material对象,通过设置Material的属性来进行控制,官方 ...

  8. 脑残式网络编程入门(六):什么是公网IP和内网IP?NAT转换又是什么鬼?

    本文引用了“帅地”发表于公众号苦逼的码农的技术分享. 1.引言 搞网络通信应用开发的程序员,可能会经常听到外网IP(即互联网IP地址)和内网IP(即局域网IP地址),但他们的区别是什么?又有什么关系呢 ...

  9. cesium编程入门(五)绘制形状

    通过Entity添加形状 先来看一个添加立方体的例子 var viewer = new Cesium.Viewer('cesiumContainer'); var redBox = **viewer. ...

随机推荐

  1. SSH 自动化安装部署遇到的问题

    1. 对于需要添加unknown host的问题可以通过添加: -o StrictHostKeyChecking=no 例如: ssh -o StrictHostKeyChecking=no acco ...

  2. Axure RP Extension for Chrome经常损坏

    昨天自己修改后的谷歌浏览器插件,才使用了一天,今天刚打开浏览器就弹出了“已停用不支持的扩展程序”提示,第三方扩展程序就这么不受谷歌浏览器待见呢!?好吧,想办法解决! 通过扩展程序里“该扩展程序未列在 ...

  3. 解决Linux下MySQL登录ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using passwor)问题

    两种方案: 一: 1.修改mysql配置文件:vim /etc/my.cnf 2.找到[mysqld]下添加 skip-grant-tables 配置 3.重启服务service mysqld res ...

  4. 20165233 Java第一章学习总结

    20165233 2017-2018-2 <Java程序设计>第一周学习总结 教材学习内容总结 第一章 Java特点:语法简单.面向对象.与平台无关.动态. 字节码不能被任何平台直接识别. ...

  5. CentOS6系统优化

    [root@xuliangwei ~]# cat /etc/redhat-release //系统环境CentOS6.6 CentOS release 6.6 (Final) [root@xulian ...

  6. CSS控制文字只显示一行 超出部分显示省略号

         <p style="width: 120px; height: 50px; border: 1px solid blue; white-space: nowrap; over ...

  7. MVC中@Html.Action的用法

    MVC项目中如果有公共部分的代码就可以单独拿出来作为控件来用(比如头部和底部代码).跟ASP.NET中的ASCX实现的效果一样,但MVC比它方便的多. 想要实现该效果,需要知道@Html.Action ...

  8. openAL在mac下播放音源结束时判断处理

    音频播放完毕,自然停止 alGetSourcei(source[0], AL_BUFFERS_QUEUED, &state);    NSLog(@"queued number:%d ...

  9. 迷你MVVM框架 avalonjs 学习教程1、引入avalon

    avalon是国内最强大的MVVM框架,没有之一,虽然淘宝KISSY团队也搞了两个MVVM框架,但都无疾而终.其他的MVVM框架都没几个.也只有外国人与像我这样闲的架构师才有时间钻研这东西.我很早之前 ...

  10. y=x^2 vs y=x^(1/2)

    [y=x^2 vs y=x^(1/2)] y=x^2,基础函数,废话不多说. y=x^(1/2),指数变成了上式的倒数.x^(1/2)即是,√x.但函数图像会是什么样呢?可以把y=x^(1/2),转变 ...