ModelGraphics类是隶属于实体对象的一个类型,主要用于创建模型图形,加载的gltf模型数据,和前面说到的广告牌类似,只不过这里添加的模型数据。
关于gltf模型数据的制作,请参考前面的博客SuperMap iClient3D for WebGL教程(模型篇)-S3M/GLTF制作
添加的效果如下图
基础使用方法如下:
viewer.entities.add({
id: "test",
position: Cesium.Cartesian3.fromDegrees(101.80089882736969, 26.60700234866561, 200),
model: {
uri: 'data/Cesium_Air.gltf'
}
});
接下来我们一起来学习下ModelGraphics的特点。
一、主要参数介绍
1、uri:一个gltf的地址属性,可以是本地数据,也可以是在线数据。
2、show:指定模型是否显示出来。
3、scale:指定模型的缩放比例
4、minimumPixelSize:指定模型缩小到多少像素后,不再能被缩小,默认值是0,就是能被无限缩小。例如将值设为200,不断缩小场景,我们依然可以看见一个大小不变化的飞机模型。
5、maximumScale:模型的最大比例尺寸,指定此属性后minimumPixelSize将不能持续被放大,当超过maximumScale后,模型能够被缩??;并且minimumPixelSize是maximumScale能放大到的最大尺寸,是不是比较晕乎,来看个动图,我们将maximumScale设置为50,minimumPixelSize设置为200,注意观察中间过程,中间是否有个过程不能再被缩小,当放大一定程度后就可以被持续缩小了
6、incrementallyLoadTextures:官方介绍是设置在加载模型后纹理是否可以继续流入,默认是true,据说是在动态修改贴图的时候使用的,目前没有用过,用到的时候再来更新。
7、runAnimations:指定是否应该启动模型中指定的gltf动画,默认是true,当设置为false时,gltf动画模型默认不启动动画。
8、shadows:模型的阴影方式,当viewer的shadows为true时有效,有阴影的模型将更加具有立体感。
9、heightReference:高度模式,支持Cesium.HeightReference.NONE(绝对高度)、Cesium.HeightReference.RELATIVE_TO_GROUND(相对地面)、Cesium.HeightReference.CLAMP_TO_GROUND(贴地)三种高度模式,高度模式通过字面意思理解即可。
10、distanceDisplayCondition:即是控制模型在什么相机位置下显示出来。例如设置distanceDisplayCondition:new Cesium.DistanceDisplayCondition(1500,5000),即是在相机距离1500-5000的位置范围内显示,其他范围模型都不显示。
11、silhouetteColor:模型的轮廓颜色,默认为红色,需要配合silhouetteSize使用才会有效果,silhouetteSize为轮廓的像素宽度,我们将silhouetteSize设置为2.0展现出如下效果:
12、color:指定Color与模型的渲染颜色混合的属性,默认为白色,即没有任何颜色,显示模型本色。
13、colorBlendMode:模型的颜色混合模式,支持3种,Cesium.ColorBlendMode.REPLACE(替换模式)、Cesium.ColorBlendMode.MIX(混合模式)、Cesium.ColorBlendMode.HIGHLIGHT(相乘模式),我们将模型的渲染颜色设置为new Cesium.Color(1,0,0,1)红色,来看下三种模式的区别
14、colorBlendAmount:混合模式的强度值,当colorBlendMode为Cesium.ColorBlendMode.MIX时有效,范围0-1,0表示不和颜色混合,1则表示替换。
主要的参数就介绍到此。
二、使用方法
ModelGraphics隶属于Entity大类,操作当然全部在EntityCollection中进行操作,接下来我们来一步一步的实现。
1、添加ModelGraphics
我们使用viewer.entities.add方法进行添加
添加对象有几个必填参数id(对象的唯一标识符。如果没有提供,则生成GUID,所以建议自己添加)、position、model
viewer.entities.add({
id: "test",
position: Cesium.Cartesian3.fromDegrees(101.80089882736969, 26.60700234866561, 200),
model: {
uri: 'data/Cesium_Air.gltf',
}
});
这样即可添加一个ModelGraphics,其他参数可以按照上一步介绍到的参数进行按需添加。
我们对模型数据,这里多介绍一个参数orientation,也就是实体的方向属性,我们添加完模型后,如果方向不对可以使用这个方法进行调整模型方向,关于方向我们需要使用到Cesium.HeadingPitchRoll这个类型
首先来了解下Heading、Pitch、Roll三个参数。
Heading:即是Z轴方向的旋转角,比如调整飞机机头的东南西北的方向。
pitch:对象上下的旋转,比如调整飞机机头向上,还是向下的方向。
roll:对象中轴线上的旋转,比如调整飞机向左倾斜还是向右倾斜。
我们设置Heading为45°
实现代码如下:
var position=Cesium.Cartesian3.fromDegrees(101.80089882736969, 26.60700234866561, 200)
var airmodel=viewer.entities.getById("test");
var headingPitchRoll=new Cesium.HeadingPitchRoll(Cesium.Math.toRadians(45),0,0);
var orientation=Cesium.Transforms.headingPitchRollQuaternion(position,headingPitchRoll);
airmodel.orientation=orientation;
设置pitch为45°,像不像一只飞翔的小鸟?
三、综合使用
这里引入一个entity里面的新类型path,与实体关联的路径对象,和SampledPositionProperty属性,这里我们添加一个沿线飞行的飞机。path类型和SampledPositionProperty类型后续文章会讲到
代码如下:
var startTime = viewer.clock.currentTime;
var positions = new Cesium.SampledPositionProperty();
positions.addSample(startTime, Cesium.Cartesian3.fromDegrees(101.80089882736969, 26.60700234866561, 200));
var stopTime = Cesium.JulianDate.addSeconds(startTime, 60, new Cesium.JulianDate());
positions.addSample(stopTime, Cesium.Cartesian3.fromDegrees(101.88089882736969, 26.60700234866561, 200));
var position = Cesium.Cartesian3.fromDegrees(101.80089882736969, 26.60700234866561, 200)
var airmodel = viewer.entities.getById("test");
var headingPitchRoll = new Cesium.HeadingPitchRoll(0, Cesium.Math.toRadians(5), 0);
var orientation = Cesium.Transforms.headingPitchRollQuaternion(position, headingPitchRoll);
viewer.entities.add({
id: "test",
availability: new Cesium.TimeIntervalCollection([new Cesium.TimeInterval({
start: startTime,
stop: stopTime
})]),
position: positions,
orientation:orientation,
model: {
uri: 'data/Cesium_Air.gltf',
},
path: {
resolution: 1,
material: new Cesium.PolylineGlowMaterialProperty({
glowPower: 0.1,
color: Cesium.Color.RED
}),
width: 10
}
});
viewer.trackedEntity = viewer.entities.getById("test");
实现效果如下: