目录
- 1. 概述
- 2. 代码
- 3. 解析
- 4. 参考
1. 概述
Cesium自带的3D Models示例,展示了如何加载glTF格式三维模型数据。glTF是为WebGL量身定制的数据格式,在网络环境下有自己的优点。可以在Cesium的源码包中找到一些该类型的数据。
2. 代码
HTML页面3DModels.html代码如下:
Cesium Demo
主要的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机制总结