Cesium案例解析(四)——3DModels模型加载
文章目录
- 1. 概述
- 2. 代码
- 3. 解析
- 4. 参考
1. 概述
Cesium自带的3D Models示例,展示了如何加载glTF格式三维模型数据。glTF是为WebGL量身定制的数据格式,在网络环境下有自己的优点。可以在Cesium的源码包中找到一些该类型的数据。
2. 代码
HTML页面3DModels.html代码如下:
<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport"content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"><meta name="description" content="Create 3D models using glTF."><meta name="cesium-sandcastle-labels" content="Beginner, Tutorials, Showcases"><title>Cesium Demo</title><script type="text/javascript" src="../Build/Cesium/Cesium.js"></script><style>@import url(../Build/Cesium/Widgets/widgets.css);html,body {width: 100%;height: 100%;margin: 0;padding: 0;overflow: hidden;font-family: sans-serif;background: #000;}.fullSize {display: block;position: absolute;top: 0;left: 0;border: none;width: 100%;height: 100%;}#toolbar {margin: 5px;padding: 2px 5px;position: absolute;}</style>
</head><body><div id="cesiumContainer" class="fullSize"></div><div id="toolbar"><select id = "model_select" class="cesium-button"><option value="Aircraft">Aircraft</option><option value="Ground Vehicle">Ground Vehicle</option><option value="Hot Air Balloon">Hot Air Balloon</option><option value="Milk Truck">Milk Truck</option><option value="Skinned Character">Skinned Character</option><option value="Draco Compressed Model">Draco Compressed Model</option></select></div><script src="3DModels.js"></script>
</body></html>
主要的javascript代码3DModels.js如下:
"use strict"//Add your ion access token from cesium.com/ion/
Cesium.Ion.defaultAccessToken = '你申请的key';//var viewer = new Cesium.Viewer('cesiumContainer');
var viewer = new Cesium.Viewer('cesiumContainer', {infoBox: false,selectionIndicator: false,shadows: true,shouldAnimate: true
});function createModel(url, height) {viewer.entities.removeAll();var position = Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706, height);var heading = Cesium.Math.toRadians(135);var pitch = 0;var roll = 0;var hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);var orientation = Cesium.Transforms.headingPitchRollQuaternion(position, hpr);var entity = viewer.entities.add({name: url,position: position,orientation: orientation,model: {uri: url,minimumPixelSize: 128,maximumScale: 20000}});viewer.trackedEntity = entity;
}var model_select = document.getElementById("model_select");
if (model_select) {model_select.onchange = function () { switch (model_select.selectedIndex) {case 0: createModel('../SampleData/models/CesiumAir/Cesium_Air.glb', 5000.0);break;case 1:createModel('../SampleData/models/GroundVehicle/GroundVehicle.glb', 0);break;case 2:createModel('../SampleData/models/CesiumBalloon/CesiumBalloon.glb', 1000.0);break;case 3:createModel('../SampleData/models/CesiumMilkTruck/CesiumMilkTruck-kmc.glb', 0);break;case 4:createModel('../SampleData/models/CesiumMan/Cesium_Man.glb', 0);break;case 5:createModel('../SampleData/models/DracoCompressed/CesiumMilkTruck.gltf', 0);break;default:break;}}model_select.value="Aircraft";model_select.onchange();
}
运行效果如下:
3. 解析
3D模型在Cesium中被描述为名为Cesium.Entity的实体类,可以通过这个类加载gltf的3D模型数据。而地球显示组件Cesium.Viewer存在一个成员变量entities,它就是Cesium.Entity的集合类,提供了add函数接口。所以关键代码如下:
var position = Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706, height);
var heading = Cesium.Math.toRadians(135);
var pitch = 0;
var roll = 0;
var hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);
var orientation = Cesium.Transforms.headingPitchRollQuaternion(position, hpr);var entity = viewer.entities.add({name: url,position: position,orientation: orientation,model: {uri: url,minimumPixelSize: 128,maximumScale: 20000}
});
add函数填入的参数及其就是创建Cesium.Entity对象需要的options对象:
其中,model键的值就是一个Cesium.ModelGraphics对象,也就是想要加载的的gltf模型,它也有创建自己的options对象:
参数minimumPixelSize表示模型缩小到多少像素后,不再能被缩小。
maximumScale这个参数就有点不好理解了,文档描述为模型的最大比例尺寸,minimumPixelSize的最大上限。从实际表现上来看,应该表示的就是,缩放时保持模型保持一定的尺度不变,但是不能保持永远不变,当缩放一定的尺度后,就会缩放一起变小。这个值就是第二次缩放时的尺度。
模型的位置以及方位参数是有外部的Cesium.Entity来决定的。position是其位置信息,orientation是方位信息,这里有点像给Camera设置参数的部分,只不过传入的方位参数通过headingPitchRollQuaternion进一步转换成了四元数。
另外一个值得关注的点就是,从文档中可以看出很多options对象的键值其实是Property类型,或者是与Property相关的类型。这里面其实包含了Cesium的Property机制,简单来说就是这些值可以与时间相关联,在不同的时间可以动态地返回不同的属性值,能够数据驱动,实时动态三维展示。这个Property机制,值得进一步研究。
4. 参考
[1] SuperMap iClient3D for WebGL教程(Entity)-ModelGraphics
[2] Cesium的Property机制总结
Cesium案例解析(四)——3DModels模型加载相关推荐
- 草图大师sketchup的模型加载到cesium里显示 带贴图
草图大师sketchup的模型加载到cesium里显示 带贴图 前言 一.sketchUp导出obj格式 二.在Blender中转换数据 1.导入数据 2.调整尺寸和视图 三.cesium中加载 总结 ...
- Cesium bim模型加载并与模型树关联(分层加载)
很久都没写文章了,最近实在是太忙了,向各位关注我的小伙伴致个歉! 最近没事儿写了个模型树和模型关联的功能,处理工具是用的cesiumlab. 说明一下为什么要用cesiumlab: 网上现在有很多的模 ...
- Android OpenGLES2.0(十四)——Obj格式3D模型加载
转自:http://blog.csdn.net/junzia/article/details/54300202 在博主<OpenGLES系列>文章中,最开始的几篇讲的就是OpenGL世界中 ...
- cesium模型加载-加载fbx格式模型
整体思路: fbx格式→dae格式→gltf格式→cesium加载gltf格式模型 具体方法: 1. fbx格式→dae格式 工具:3dsMax, 3dsMax插件:OpenCOLLADA, 下载地址 ...
- python爬虫实例解析-Python(爬虫)- 动态加载案例分析
requests """ 基于网络请求的模块. 环境的安装:pip install requests 作用:模拟浏览器发起请求 分析requests的编码流程: 1.指定 ...
- sketchup制作模型加载进cesium
使用sketchup绘制模型, 模板选用 简单-米 , 绘制完成后使用卷尺工具测量,绘制的尺寸是否正确 或者绘制的时候手动输入尺寸, 设置地理位置,获取其经纬度坐标,后面需要用到 选择材质.并导出为f ...
- OpenGL OBJ模型加载.
在我们前面绘制一个屋,我们可以看到,需要每个立方体一个一个的自己来推并且还要处理位置信息.代码量大并且要时间.现在我们通过加载模型文件的方法来生成模型文件,比较流行的3D模型文件有OBJ,FBX,da ...
- OpenGL Assimp模型加载库
OpenGL Assimp库 前言 模型加载库 构建Assimp 前言 到目前为止的所有场景中,我们一直都在滥用我们的箱子朋友,但时间久了甚至是我们最好的朋友也会感到无聊.在日常的图形程序中,通常都会 ...
- PyTorch框架学习十九——模型加载与保存
PyTorch框架学习十九--模型加载与保存 一.序列化与反序列化 二.PyTorch中的序列化与反序列化 1.torch.save 2.torch.load 三.模型的保存 1.方法一:保存整个Mo ...
最新文章
- php运行显示中文乱码,如何解决PHP界面显示中文乱码的问题
- 【转】Kconfig,Makefile 和 .config
- redis 失效时间单位是秒还是毫秒_Redis 事务与过期时间详细介绍
- jquery live hover绑定方法
- c语言将数据写入文件后乱码_html文件的下载,如何使用字节流,如何使用转换流...
- 同一路由带参刷新,以及params和query两种方式传参的异同
- Windows2003四大必知版本
- if--(else)语句,getchar()和putchar()、、||、!逻辑运算符
- 将webService(CXF)与spring集成
- 如何批量删除.svn文件
- 一个能拖动,能调整大小,能更新bind值的vue指令-vuedragx
- 关于如何理解链表结构体指针引用LinkNode * L的问题
- 局域网传输文件_如何“互传文件”?简单几步,方便快捷
- 计算机win10分区软件,分区工具哪个好? win10系统分区助手值得拥有
- NPN与PNP型传感器的区别
- 夜深人静写算法【递归】
- Struts2进阶版
- 6374. 【NOIP2019模拟2019.10.04】结界[生与死的境界]
- Linux下编译pjproject-2.6并运行例程simple_pjsua
- 计算机网络协议分析 第三课 PAP,CHAP,PPPoE