cesium 学习() 加载场景模型

一、前言

  现在开始实际的看看效果,目前我所接触到基本上都是使用Cesium加载模型这个内容,以及在模型上进行操作。So,现在进行一些加载模型的学习,数据的话可以去网上找,因为目前使用的都是需要保密的数据,所以不能发在网上。

二、加载Entity类型模型

  说到加载Entity模型,内容就有点多了,cesium场景中的点、线、面、label以及模型(gltf、glb);还有圆、墙体、方体、球等几何对象也都可以使用Entity来加载。下面分别加载试试看。

2.1加载点、线、面

var viewer = new Cesium.Viewer('cesiumContainer');  // 场景查看器对象
// 点的Entity
var pointEntity = new Cesium.Entity({
id: 'point', // id属性
position: Cesium.Cartesian3.fromDegrees(, , ), // 位置
point: { // 点
color: new Cesium.Color.fromCssColorString("#3388ff"), // 点颜色
pixelSize: , // 点大小
outlineColor: new Cesium.Color.fromCssColorString("#ffffff"), // 点的外圈线颜色
outlineWidth: , // 点的外圈线宽度
disableDepthTestDistance: Number.POSITIVE_INFINITY // 被遮挡是否可见(也就是将这个Entity在场景中置顶)
}
});
// 线的Entity
var lineEntity = new Cesium.Entity({
name: "line", // 线的name属性
polyline: { // 线
positions: [Cesium.Cartesian3.fromDegrees(, , ), Cesium.Cartesian3.fromDegrees(, , )], // 由点构线
width: 5.0, // 线的宽度
material: new Cesium.PolylineGlowMaterialProperty({
color: Cesium.Color.GOLD,
}), // 线的材质、样式
depthFailMaterial: new Cesium.PolylineGlowMaterialProperty({
color: Cesium.Color.GOLD,
}), // 视线被遮挡处的材质、样式(和上一个材质一样的话则就不会被遮挡,类似置顶效果)
}
});
// 面的Entity,其他Entity属性可以自行查看API
var polygon = new Cesium.Entity({
polygon: {
height: 0.1,
hierarchy: new Cesium.PolygonHierarchy(Cesium.Cartesian3.fromDegreesArrayHeights([, , , , , , , , ])), // 面的顶点坐标集合
material: new Cesium.Color.fromCssColorString("#FFD700").withAlpha(.), // 材质样式
perPositionHeight: true, // 是否支持坐标高度
}
});

2.2加载label

  其实label一般和其他一起使用,比如点。

 var entity = viewer.entities.add({
id: '',
position: Cesium.Cartesian3.fromDegrees(, , ),
point: {
color: new Cesium.Color.fromCssColorString("#3388ff"),
pixelSize: ,
outlineColor: new Cesium.Color.fromCssColorString("#3388ff"),
outlineWidth: ,
heightReference: Cesium.HeightReference.RELATIVE_TO_GROUND,
disableDepthTestDistance: Number.POSITIVE_INFINITY
},
label: {
text: 'lable文本',
font: '10px sans-serif', // 字体
style: Cesium.LabelStyle.FILL_AND_OUTLINE, // 样式
fillColor: Cesium.Color.WHITE, // 填充色
outlineWidth: , // 字体外圈线宽度(同样也有颜色可设置)
verticalOrigin: Cesium.VerticalOrigin.BOTTOM, // 垂直位置
pixelOffset: new Cesium.Cartesian2(, -), // 中心位置
disableDepthTestDistance: Number.POSITIVE_INFINITY
}
});

2.3加载model

  model类型的entity的资源可以是使用max等建模软件做的模型,然后转换成webgl加载的模型——gltf、glb。

 var modelentity = viewer.entities.add({
name:'',
description:"<div><img src='Build/Cesium/Assets/Images/cesium_credit.png' /><p>这是一辆大车!</div>", // 这是模型的描述属性,可以是html标签
position : Cesium.Cartesian3.fromDegrees(, ),
model : {
uri : 'Models/GroundVehicle/GroundVehicle.glb' // 资源路径
}
});

三、加载Primitive类型模型

  Primitive类型的加载也是比较有趣的,在Entity中不好控制的一些属性,可以在Primitive中很好的控制,比如Entity没有加载完成事件,而Primitive有加载完成事件;entity只能加载一个对象,而Primitive可以一次加载多个对象。

  当然Entity类型也是有它独特的好处的,不然官方也不会将其制造出来,明显的就是Entity类封装了很多个几何对象,非常方便的绘制出几何对象来,而如果使用Primitive的话你需要懂的知识不少,比如几何对象的构造。

  回到Primitive上,它的好处是高效加载、灵活绘制;Primitive的加载机制要好于Entity,这点我没有去做详细测试,但是网上是有这个测试的;对于其灵活性,主要是它可以不仅是单个几何对象,可以是多个几何对象或是不规则的对象的绘制加载,这点Entity没法做。

  好,还是通过几个加载来认识下Primitive。

3.1加载模型

 var modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(
Cesium.Cartesian3.fromDegrees(-75.62898254394531, 40.02804946899414, 0.0)
);
viewer.scene.primitives.add(Cesium.Model.fromGltf({ //fromGltf方法:从Gltf资源加载模型
url: 'Models/GroundVehicle/GroundVehicle.glb',
modelMatrix: modelMatrix,
// minimumPixelSize : 512,
// maximumScale : 200000
})
);
viewer.camera.flyTo({
destination: Cesium.Cartesian3.fromDegrees(-75.62898254394531, 40.02804946899414, 30.0)
});

3.2加载动画模型

 var controller = viewer.scene.screenSpaceCameraController;
//中心点
var center = new Cesium.Cartesian3();
//模型的偏移参数
var hpRoll = new Cesium.HeadingPitchRoll();
//相机的偏移参数
var hpRange = new Cesium.HeadingPitchRange();
//初始位置
position = Cesium.Cartesian3.fromDegrees(, , 0.08);
//速度向量
var speedVector = new Cesium.Cartesian3();
//生成一个由两个参考系生成的矩阵
var fixedFrameTransform = Cesium.Transforms.localFrameToFixedFrameGenerator('north', 'west');
//加载模型
peoPrimitive = scene.primitives.add(Cesium.Model.fromGltf({
//这里需要把模型路径改下(如果你用的还是HelloWord.html的话就用这个,不是的话请自行修改)
url: '../Models/GLTF/CesiumMan/Cesium_Man.glb',
modelMatrix: Cesium.Transforms.headingPitchRollToFixedFrame(position, hpRoll, Cesium.Ellipsoid.WGS84, fixedFrameTransform),
//minimumPixelSize: 128
})); //动画播放
peoPrimitive.readyPromise.then(function (model) {
// 以半速循环动画
model.activeAnimations.addAll({
speedup: ,
loop: Cesium.ModelAnimationLoop.REPEAT
});
//r=2*max(模型的半径,相机的最近距离)
r = 2.0 * Math.max(model.boundingSphere.radius, camera.frustum.near);
//镜头最近距离
controller.minimumZoomDistance = r * 0.5;
//计算center位置(也为下面的镜头跟随提供了center位置)
Cesium.Matrix4.multiplyByPoint(model.modelMatrix, model.boundingSphere.center, center);
//相机偏移角度
var heading = Cesium.Math.toRadians(0.0);
var pitch = Cesium.Math.toRadians(-20.0);
hpRange.heading = heading;
hpRange.pitch = pitch;
hpRange.range = r + ;
//固定相机
camera.lookAt(center, hpRange);
});

3.3加载多个几何对象

 var instances = [];
var positions_l = [......]; // Cartesian3坐标集合
positions_l.forEach(position => {
instances.push(new Cesium.GeometryInstance({
geometry: new Cesium.EllipseGeometry({
center: position,
semiMinorAxis: 0.024,
semiMajorAxis: 0.024,
height: ,
extrudedHeight: height1,
material: Cesium.Color.GOLD,
}),
id: { guid: guid, jsj_name: name, name: '立杆' },
attributes: {
color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.GOLDENROD)
}
}));
});
// instances 就是很多个几何对象(这里是圆柱),然后后用primitive统一合并加载
var ganmodel = viewer.scene.primitives.add(new Cesium.Primitive({
geometryInstances: instances,
appearance: new Cesium.MaterialAppearance({
material: Cesium.Material.fromType('Color', {
color: Cesium.Color.GOLD
}),
}),
}));

四、总结

  Entity加载方式在一定程度上是比Primitive方式更加方便的,特别是Entity不仅可以加载点、线、面、标签、模型、几何对象,而且是可以同时加载比如点和标签一起加载,如果愿意可以使用一个Entity对象加载一个点、一条线、一个面、一个模型、多个不同的几何对象!当然Primitive方法也是可以的,不过就没有Entity这么方便了。

  Primitive主要是更偏底层一些,它可以使用Entity没有的一些属性,然后也更加灵活一些,比如我最后的添加多个立杆模型,Entity方法是没法构造一个Entity对象完成多个立杆的绘制的,有多少个立杆就得创建多少个Entity在内存使用上就稍微弱了。

cesium 学习(五) 加载场景模型的更多相关文章

  1. WebGL three.js学习笔记 加载外部模型以及Tween.js动画

    WebGL three.js学习笔记 加载外部模型以及Tween.js动画 本文的程序实现了加载外部stl格式的模型,以及学习了如何把加载的模型变为一个粒子系统,并使用Tween.js对该粒子系统进行 ...

  2. 深度学习之加载VGG19模型分类识别

    主要参考博客: https://blog.csdn.net/u011046017/article/details/80672597#%E8%AE%AD%E7%BB%83%E4%BB%A3%E7%A0% ...

  3. 深度学习之加载VGG19模型获取特征图

    1.加载VGG19获取图片特征图 # coding = utf-8 import tensorflow as tf import numpy as np import matplotlib.pyplo ...

  4. cesium加载gltf模型点击以及列表点击定位弹窗

    前言 cesium 官网的api文档介绍地址cesium官网api,里面详细的介绍 cesium 各个类的介绍,还有就是在线例子:cesium 官网在线例子,这个也是学习 cesium 的好素材. 之 ...

  5. cesium加载gltf模型

    cesium加载gltf模型 一.采用vue-cesium:在项目里加载依赖包.命令如下: npm i --save vue-cesium 在main.js中加入如下代码: https://www.n ...

  6. Unity3D基础学习 加载场景时隐藏物体,点击显示时显示物体

    隐藏物体有两种方法,一是设置Meshrender为False,即不渲染物体. 二是设置物体为False,禁用物体,我使用的第二种. 当场景中需要隐藏的物体很多时,我们可以添加一个层来表示需要隐藏的物体 ...

  7. 使用 Assimp 库加载 3D 模型

    前言 要想让自己的 3D 之旅多一点乐趣,肯定得想办法找一些有意思一点的 3D 模型.3D 模型有各种各样的格式,obj的,stl的,fbx的等等不一而足.特别是 obj 格式的 3D 模型,完全是纯 ...

  8. ceisum_加载倾斜摄影模型

    osgb转换为3Dtiles格式(使用工具转换) 然后加载到cesium中(加载代码见下,可以控制模型高度) var offset = function(height,tileset) { conso ...

  9. xBIM 实战01 在浏览器中加载IFC模型文件

    系列目录    [已更新最新开发文章,点击查看详细]  一.创建Web项目 打开VS,新建Web项目,选择 .NET Framework 4.5  选择一个空的项目 新建完成后,项目结构如下: 二.添 ...

随机推荐

  1. 10秒完成Linux系统pip在线安装

    对于Python开发攻城狮及系统运维攻城狮来说,pip的安装那是必不可少的一个过程.鉴于网上很多安装过程写得过于复杂,本人根据pip官方手册总结了以下最为快捷的安装方式,只需要2步操作. curl h ...

  2. asp.net mvc+jquery easyui开发实战教程之网站后台管理系统开发1-准备工作

    /****** Object: 新闻表 Script Date: 2017/9/2 星期六 15:11:12 ******/ SET ANSI_NULLS ON GO SET QUOTED_IDENT ...

  3. 揭秘重度MMORPG手游后台性能优化方案

    本文节选自<2018腾讯移动游戏技术评审标准与实践案例>手册,由腾讯互娱工程师王杰分享<仙剑奇侠传online>项目中游戏后台的优化经验,深度解析寻路算法.视野管理.内存优化. ...

  4. Keepalived双主模式配置流程

    实验说明 1)keepalived 支持配置多个VRRP实例,每个实例对应一个业务 2)本次实验将实现 keepalived 的互为主备: 业务A:keepalived01为Master,keepal ...

  5. Spring 注解编程之模式注解

    Spring 框架中有很多可用的注解,其中有一类注解称模式注解(Stereotype Annotations),包括 @Component, @Service,@Controller,@Reposit ...

  6. 浅入深出Vue:数据绑定

    上一篇我们使用了简单的数据渲染,那么如果说我们想要动态渲染标签的 class 可以这么操作么? 为什么绑定 简单的数据渲染,包括表达式.函数在内.其实都只是在标签中渲染,如果遇到以下情况怎么办呢: 需 ...

  7. 最全java多线程总结3——了解阻塞队列和线程安全集合不

      看了前两篇你肯定已经理解了 java 并发编程的低层构建.然而,在实际编程中,应该经可能的远离低层结构,毕竟太底层的东西用起来是比较容易出错的,特别是并发编程,既难以调试,也难以发现问题,我们还是 ...

  8. 关于Jvm类加载机制,这一篇就够了

    前言 一个月没更新了,这个月发生了太多的事情,导致更新的频率大大降低,不管怎样收拾心情,技术的研究不能落下! jvm作为每个java程序猿必须了解的知识,博主推荐一本书<深入理解Java虚拟机& ...

  9. 【MYSQL】mysql大数据量分页性能优化

    转载地址: http://www.cnblogs.com/lpfuture/p/5772055.html https://www.cnblogs.com/shiwenhu/p/5757250.html ...

  10. 点菜网---Java开源生鲜电商平台-商品基础业务架构设计-商品分类(源码可下载)

    点菜网---Java开源生鲜电商平台-商品基础业务架构设计-商品分类 (源码可下载) 说明:我们搞过电商的人都可以体会到,搞生鲜电商是最复杂的,为什么复杂呢?我总结了有以下几个业务特性决定的: 1. ...