添加 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. Hadoop详细安装配置过程

    步骤一:基础环境搭建 1.下载并安装ubuntukylin-15.10-desktop-amd64.iso 2.安装ssh sudo apt-get install openssh-server op ...

  2. Linux常用命令之-grep

    简介 grep全称Global Regular Expression Print是一种强大的文本搜索工具,它能使用给定的正则表达式按行搜索文本输出,文件,目录等,统计并输出匹配的信息,grep在文本查 ...

  3. docker-ubuntu镜像,nginx镜像

    docker 是将程序与机器隔开,使程序不受环境影响. 安装 sudo apt-get install docker.io ## 好用的一些命令 1.停用全部运行中的容器: docker stop $ ...

  4. django-控制mysql事物

    from django.db import transaction 两种方式控制事务:为了保持数据一致性 一个Book表,一个Author表.添加一本书,也要保证添加作者.By事物控制 book = ...

  5. 【好文转帖】控制反转(IOC)和依赖注入(DI)的区别

    IOC   inversion of control  控制反转 DI   Dependency Injection  依赖注入 要理解这两个概念,首先要搞清楚以下几个问题: 参与者都有谁? 依赖:谁 ...

  6. QT error LNK2019: 无法解析的外部符号

    一个见到那的错误,困扰了好几天了,今天才解决,记录下. 使用QT Creator建立项目,添加一个QT设计界面widget,命名为TestWidget.有ui,头文件(.h),源码文件(.cpp).在 ...

  7. Spring cloud Hystrix使用@HystrixCommand使用Hystrix组件及@EnableCircuitBreaker原理介绍

    通过@HystrixCommand注解实现在Spring Cloud使用Hystrix组件相关的工程 cloud-registration-center:注册中心 cloud-service-hyst ...

  8. window10上安装python+CUDA+CuDNN+TensorFlow

    软件 版本 Window10 X64 python 3.6.4(64位) CUDA CUDA Toolkit 9.0 (Sept 2017) CuDNN cuDNN v7.0.5 (Dec 5, 20 ...

  9. spring boot 1

    1.创建项目. meven可以配置阿里云meven镜像 <mirror> <id>nexus-aliyun</id> <mirrorOf>central ...

  10. fiddler手机抓包

    配置好之后,发现手机不能连接代理服务器,用netstat发现根本就没有手机的ip地址,于是猜想是不是防火墙的问题,关闭防火墙果然能连上,开启防火墙又连不上了,这就说明确实是防火墙的问题,关闭防火墙又很 ...