Cesium — Entity 拖拽、属性修改

Cesium — Entity 拖拽、属性修改,第1张

目标

思路

Cesium 中使用 scene.pick 或 scene.drillPick 方法选中 Entity 对象;当多个 Entity 互相覆盖时,前者选中的是最上层的 Entity ,后者选中的是鼠标下所有的 Entity 。

这里主要实现 GLTF 三维模型的拖拽,其它类型 Entity 的拖拽可作参考。

(1)首先定义三个函数,分别对应左键按下、鼠标移动、左键抬起。

(2) 给 Viewer 添加相应鼠标事件

选中 Entity 后,即可获取相应的属性信息。下面的 pickModel 函数传入windowPosition,返回一个 Entity 对象。

获取到 Entity 对象后,可对其属性进行修改:

cesium提供了两种方式添加实体,分别是entity与primitive。

如果是多个实体,我们可以将其合并为一个大Geometry,这样可以大大减轻CPU负担,从而更好的使用GPU。

绘制效果:

无论是通过Entity类,还是通过Primitive类添加的空间几何数据,Cesium都提供了对应的方法或材质相关类对材质进行修改。在讲解材质设置之前,首先我们先简单地介绍下什么是材质。比较粗浅的理解是,材质可以是几何对象表面的任意一种着色(Cesium.Color)、可以是贴在其表面的一张图片、也可以是一个纹理或图案,比如下图中的条形或棋盘形的图案。

针对于两种方式(Entity和Primitive)绘制的几何对象,Cesium也提供了Material类和MaterialProperty类,分别对通过Primitive和Entity两种方式生成的几何对象的material属性进行赋值。这里特别要注意,Primitive的appearance(或继承类)的material属性为Material类型,Entity的xxxGraphics的material属性为MaterialProperty或Color类型,请大家不要记混。

Material类专为Appearance类而生,用于修改Primitive的几何对象材质。同时,Apperance也有自己的继承类,通过修改部分继承类的material属性,也可实现Primitive几何对象材质的修改。Appearance的继承类如下图所示,其中橘黄色背景的子类,能修改其material属性。

通过Material类修改材质相对来说比较复杂,需要对OpenGL以及底层渲染机制进行了解。Cesium中的Material类的内部机制是通过一种json格式的Fabric对象来表达物体的外观特征,而这些外观特征是由漫反射(diffuse)、镜面反射(specular)、法向量(normal)、自发光(emission)以及透明度(alpha)组合(即一个Components)而成。详细可查看Cesium对Fabric的解说 https://github.com/CesiumGS/cesium/wiki/Fabric 。

Cesium为我们提供了23种现成的Material类型,可通过Material.fromType方法和Fabric两种方式去获取并设置几何对象材质。如下是通过Material类的两种方式实现着色的示例:

具体可查阅Material类文档说明: http://127.0.0.1:5500/Build/Documentation/Material.html?classFilter=material ,以及Material的沙盒示例: https://sandcastle.cesium.com/index.html?src=Materials.html 。

从Material的Fabric对象组成来看,要想创建一个新的Material,用户只需要指定type、uniforms、compontents三个属性,构建一个Fabric的JSON对象。如果想写一些自定义的shader,则需要再指定source属性。

MaterialProperty类专为Entity而生,它是一个抽象类,我们无法对它进行实例化。要使用该类对材质进行设置,需要实例化其子类。MaterialProperty类的继承类,如下图所示:

1.ColorMaterialProperty 颜色材质

ColorMaterialProperty类相对来说比较简单,你可以直接使用Cesium.Color替换它,两个类实现的效果最终是一样的,都是给几何对象直接着色。

2.ImageMaterialProperty 贴图材质

ImageMaterialProperty类可以给几何对象表面贴上一张图片。

3.CheckerboardMaterialProperty 棋盘纹理

4.StripeMaterialProperty 条纹纹理

5.GridMaterialProperty 网格

6.PolylineGlowMaterialProperty 发光材质

7.PolylineOutlineMaterialProperty 外轮廓材质

8.PolylineArrowMaterialProperty 带有箭头的线

9.PolylineDashMaterialProperty 虚线

上述9种方式生成的效果图如下所示:


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/7978933.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-12
下一篇 2023-04-12

发表评论

登录后才能评论

评论列表(0条)

保存