《三维应用开发及示例.pdf》由会员分享,可在线阅读,更多相关《三维应用开发及示例.pdf(44页珍藏版)》请在三个皮匠报告上搜索。
1、三维应用开发及示例易智瑞信息技术有限公司张迪三维模型的加载与展示即拿即用的微件示例展示场景的优化策略02010304三维模型的加载 API引入方式通过 CDN 使用 AMD 模块:异步加载,无需打包,项目运行时在html中挂载script标签,直接获取部署在服务器上的API。对比ES模块的加载方式较为简单,可快速开始开发,目前推荐demo级或者轻量的应用开发使用。(向前兼容4.X API的项目)通过 NPM 使用 ES 模块:通过npm下载依赖到本地,接入webpack等打包工具,引入编译、压缩和单元测试等功能,享受更丰富现代的JS或TS语法支持,适合规模更大,更复杂的应用开发场景。三维模型的
2、加载 API引入方式通过 CDN 使用 ES 模块:该方法要注意,需要浏览器支持使用 CDN 来加载 ES 模块的特性。因此,要确保目标浏览器支持 ES 模块并且版本较新。(仅建议将此方法用于开发和原型设计)本地托管的 AMD 模块:在某些情况下,可能需要使用GeoScene API AMD 模块的本地托管版本。例如,在没有互联网接入的受限网络环境中工作时。本地托管的 AMD 模块:在官网下载API类库包,然后将API部署到本地,即可离线使用。API部署:将API包解压后放到Web Server(IIS的wwwroot或Tomcat的webapps)下IIS服务器HTTP响应标头配置如图所示:
3、三维模型的加载 API引入方式三维模型的加载 基础元素JS API构建Web三维应用的基础元素数据层:Map、Layers展示层:SceneView、Camera三维模型的加载 Maps新JS API MVVM架构下,数据层和视图层是完全分离的,Map作为一个数据层的容器,负责数据管理,管理所有的图层。最终需要通过视图展示它。Map类管理图层的属性与方法:属性属性方法方法basemap:底图,Basemap类型ground:地形与高程信息,Ground类型allLayers:所有图层的集合,Collection类型layers:具体业务图层,Coolection类型add():添加一个图层,可
4、指定图层位置addMany():添加多个图层,可指定位置findLayerById():根据ID寻找图层remove():移除指定图层removeAll():移除全部图层removeMany():移除多个图层reorder():对某个图层进行重排序(id变换)三维模型的加载 Layers图层是可在Map中使用的数据集合,JS API支持多种类型的图层(多种类型的数据源)构建一个三维应用常用的数据:精模精模(SceneLayerSceneLayer)BIMBIM(BuildingLayeBuildingLayer r)倾斜摄影数据倾斜摄影数据(IntegratedMeshLayeIntegrat
5、edMeshLayer r)点云点云(PointCloudLayePointCloudLayer r)体元体元(VoxelLayerVoxelLayer)适合手工精细建模数据,如3dsMax生产出来的数据。BIM数据无人机倾斜摄影数据激光雷达获取的点云数据体元数据支持renderer支持renderer支持部分(不)展示支持renderer支持部分(不)展示支持popup支持popup支持压平不支持popup支持popup支持querying支持querying不支持renderer不支持querying不支持querying不支持popup不支持querying三维模型的加载 ViewsVi
6、ew主要作用是渲染图层、图层弹窗和微件,处理用户交互。在三维应用中,使用基于浏览器WebGL技术的SceneView,来渲染3D视图。SceneView提供了两种展示地球形态的方式:global模式将地球描述为球体,其通过WebMercator、GCS2000 或者 WGS84空间投影来创建;允许显示整个地球场景;可以浏览地下(Ground.navigationConstraint.type设置为none)。local模式将地球描述为一个平面,可以通过任何坐标系来创建;显示局部场景;可以浏览地下。三维模型的展示 Camera创建 SceneView 时,它包含一个相机属性。相机定义了观察场景视
7、图可见范围的点的位置、倾斜度和航向。此类仅适用于 3D场景视图。三维模型的展示 移动视角如果给定的目标远离当前相机位置,则航向和倾斜将自动设置为其中性值。始终可以显示设置倾斜和航向以覆盖此行为。三维模型的展示 EnvironmentEnvironment可以更改场景所处的环境状况。支持场景所处背景修改、光照配置以及改变天气状况等功能。三维模型的展示 用户交互view支持的事件可以分为以下几种:鼠标事件:click,double-click,drag,hold,immediate-click,immediate-double-click,pointer-down,mouse-wheel,poin
8、ter-leave,pointer-move,pointer-up 键盘事件:key-down,key-up view变化事件:focus,blur,layerview-create,layerview-create-error,layerview-destroy,resize符号渲染 点、线、面、MeshSceneView 基础渲染符号(Symbol3D):PointSymbol3DLineSymbol3DPolygonSymbol3DMeshSymbol3DLabelSymbol3D3d标签(LabelSymbol3D)与标注线结合使用标注山峰高度,标签数据来自于feature layer
9、符号渲染 WebStyleSymbolWebStyleSymbol 是一个用于方便地创建矢量 2D 符号以及逼真和主题 3D 符号的类。它是一个包装器,用于创建指向API中可用的Web样式资源的PointSymbol3D 对象。Renderer 定义了图层将如何绘制,下面为开发常用的几种render:SimpleRenderer:使用同一个Symbol渲染图层中的所有要素。UniqueValueRenderer:基于一个或多个匹配字符串属性对图层中的要素进行符号化。通常使用独特的颜色、填充样式或图像来表示字符串字段中具有相等值的要素。图层渲染器 RendererClassBreaksRende
10、rer:根据数值属性的值定义图层中每个要素的符号。符号是根据数据的类别或范围分配的。根据属性值所在的类,为每个类别特征指定一个符号。图层渲染器 Renderer三维模型的加载与展示即拿即用的微件示例展示场景的优化策略02010304API对于三维模型的优化策略1.I3S数据请求策略:屏幕中心数据优先于屏幕边缘,先于屏幕外的数据完成渲染,以达到在有限时间内加载合适数据的目的。单纯使用并行请求没有适当的控制或优化,就可能会消费全部有限带宽,会导致不急需渲染的场景数据请求占满带宽造成阻塞。API对于三维模型的优化策略2.多级缓存策略:除了服务器端CDN缓存和浏览器请求缓存的原始三维数据外,JS AP
11、I会将当前场景处理过的CPU运算友好型3D数据,缓存在浏览器IndexedDB中,便于CPU复用。3.渐进式加载(LOD)策略:加载大量三维数据时,先快速展示一个预览然后加载更精细的数据,优于长时间空白等待详细数据。JS API中的LOD系统基于屏幕分辨率。首先模拟一个较低的分辨率的屏幕,下载在该分辨率下需显示的节点,实现图层的快速概览。然后请求更精细的数据来优化三维场景显示。API对于三维模型的优化策略4.单个图层内存使用策略:渲染三维图层时,根据I3S服务提供的模型球体边界信息,重新计算出更贴合的模型包围体(计算结果缓存在IndexedDB,使用浏览器web worker进行计算工作,不阻
12、塞浏览器主线程)。可以得到更精确的LOD加载策略,达到减少渲染数据(减少的内存占用),却能保持渲染结果的目的。5.全局内存使用策略:在每次场景内容或摄像机位置发生变化时,都会重新评估内存使用情况,并动态地提高或降低全局细节级别,同时触发缓存和卸载数据。三维模型的加载与展示即拿即用的微件示例展示场景的优化策略02010304 前端模块化分装手段,一直作为JS API的特色 核心逻辑和表示的分离使得微件具有高度的可定制性 提供大量开箱即用的微件,并允许开发人员自定义创建微件,帮助我们快速构建强大、可用的Web应用程序 采用响应式设计,无缝兼容Mobile和PC各种不同分辨率和布局即拿即用的微件目前
13、已有50+微件可直接使用3D视线分析用户可以确定一个观察点与多个被观测点。微件会在两点之间确定一条线段,若从观察点可以正常看到被观察点,则线段为绿色,若观测不到则为红色并且会标识出障碍物位置。Swipe微件Swipe微件允许用户通过在视图中放置分隔符和手柄来同时查看图层集合,以显示一个或多个图层的选定部分。这个小部件目前适用于除GroupLayers以外的所有层。底图列表利用BasemapGallery微件,可以帮助用户实现在不同的底图之间切换。默认情况下,如果定义了portalUrl,那么BasemapGallery将显示在门户中定义的基础地图列表。在2D MapView中,只会显示2D底图
14、。3D场景视图还将包括3D底图,这 些 底 图 可 以 通 过“3D”标签进行区分。天气微件日照分析使用日光微件来更改SceneView中的照明条件。为了照亮场景,可以使用日期和时间配置来定位太阳或切换到虚拟模式,其中光源相对于相机。Slice小部件是一个3D分析工具,可以用来显示SceneView中被遮挡的内容。切片小部件可以应用于任何层类型,使其能够看到建筑物内部或探索地质表面。三维模型剖切组件BuildingExplorer widget用 于 过 滤 和 浏 览BuildingSceneLayers 的各个组件。可以按级别、施工阶段或学科和类别对建筑物进行过滤。三维模型过滤组件三维模型
15、的加载与展示即拿即用的微件示例展示场景的优化策略02010304丰富的线性表达这个示例展示了如何将线条图案应用于折线。并且在可视化线数据时,模式提供了一个额外的维度用于匹配高程数据。在LineSymbol3DLayer上设置的图案样式,可以在场景中叠加丰富的线性表达,与地形形成完全的贴合。地质体展示GeoScene丰富了地质体的展示功能,最新的VoxelLayer可以支持地质体的剖切、属性弹框,以及根据地质块的分类进行单独的显隐操作。天气系统利用WebGL技术绘制各种天气效果,并提供天空云量贴图的渲染。通过Weather属性在SceneView 中轻松选择和配置天气状况,修改降雨、降雪以及云量
16、的密度。按几何形状查询统计信息客户端特性查询在应用程序中立即交付结果以响应用户输入的情况。对于LayerView的查询,不需要往返于服务器。用户可以绘制多边形、折线或点几何,然后将其用作查询中的空间几何参数。三维热力图HeatmapRenderer类用来快速绘制热力图,将要素图层点数据渲染为强调更高密度或加权值区域的栅格可视化效果。在倾斜摄影数据上同样可以完成热力图的绘制。天际线提取GeoScene支持对SceneView场景中的模型和地形地貌进行天际线分析操作,更好的展现了城市地标性建筑的。开挖分析利用开挖分析,用户可以自定义开挖位置、面积以及深度,用于展示地下管线、设备的分布情况。在现实生
17、活中可以用来模拟施工场景,预判受影响管线,为施工提供技术支持。几何绘制在最新的GeoScene API 中SketchViewModel类也做了全新的优化。新增了绘制辅助与节点捕捉能力,提高了用户在三维场景中的绘制体验。规则化建模方法GeoScene支持WEB端的规则化建模,可以通过CityEngine创建不同类型的模型规则包,通过参数化的方式创建模型,发布模型。从而实现前后端的联动操作。虚拟光增加了虚拟光效果,可以利用虚拟光代替自然光,在模型较暗的时可以利用VirtualLighting 类将场景中的照明更改为虚拟光。灯光的位置跟随相机并设置在相机后面,向左侧有一个小的偏移。最大限度的减少可见阴影的数量。