SuperMap iClient3D for WebGL教程（E

ModelGraphics类是隶属于实体对象的一个类型，主要用于创建模型图形，加载的gltf模型数据，和前面说到的广告牌类似，只不过这里添加的模型数据。
关于gltf模型数据的制作，请参考前面的博客SuperMap iClient3D for WebGL教程（模型篇）-S3M/GLTF制作
添加的效果如下图

ModelGraphics效果
基础使用方法如下：

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，不断缩小场景，我们依然可以看见一个大小不变化的飞机模型。

image.png

5、maximumScale：模型的最大比例尺寸，指定此属性后minimumPixelSize将不能持续被放大，当超过maximumScale后，模型能够被缩小；并且minimumPixelSize是maximumScale能放大到的最大尺寸，是不是比较晕乎，来看个动图，我们将maximumScale设置为50，minimumPixelSize设置为200，注意观察中间过程，中间是否有个过程不能再被缩小，当放大一定程度后就可以被持续缩小了

maximumScale演示
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展现出如下效果：

image.png

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这个类型

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°，像不像一只飞翔的小鸟？

pitch效果

三、综合使用

这里引入一个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");

实现效果如下：

综合使用