SuperMap iClient3D for WebGL教程(Entity)-ModelGraphics

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");

实现效果如下:


综合使用
最后编辑于
?著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,128评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,316评论 3 388
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事?!?“怎么了?”我有些...
    开封第一讲书人阅读 159,737评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,283评论 1 287
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,384评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,458评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,467评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,251评论 0 269
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,688评论 1 306
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,980评论 2 328
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,155评论 1 342
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,818评论 4 337
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,492评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,142评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,382评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,020评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,044评论 2 352