【Cesium学习(八)】Cesium设置材质—后续

【Cesium学习(八)】Cesium设置材质—后续

在前面一篇文章中学习了为Cesium设置各种材质 【Cesium学习(八)】Cesium设置材质
接下来将会对材质进行后续补充。
上文讲解到给Cesium设置材质,有一下几个类型:
ColorMaterialProperty
CompositeMaterialProperty
GridMaterialProperty
ImageMaterialProperty
StripeMaterialProperty
PolylineGlowMaterialProperty
PolylineOutlineMaterialProperty
接着我们将继续学习后面几个类型。
后面材质需要用到PolyLine,我们先来添加一个PolyLine

var entity_polyline = viewer.entities.add({
    polyline: {
        positions: Cesium.Cartesian3.fromDegreesArray([-77, 35, -77.1, 35]),
        width: 5,
        material: Cesium.Color.RED,
    },
});
viewer.zoomTo(entity_polyline); // 定位到创建的实体

在这里插入图片描述

1、PolylineGlowMaterialProperty – 折线发光材质
在这里插入图片描述
这个材质的几个属性:
color :获取或设置指定行的 Color 的属性。
glowPower :一个数字属性,用于指定发光强度,以总线宽的百分比表示。
taperPower:一个数字属性,指定渐缩效果的强度,以占总线长的百分比表示。如果为1.0或更高,则不使用锥度效果。

polyline.material = new Cesium.PolylineGlowMaterialProperty({
    glowPower: 0.5,
    color: Cesium.Color.GREEN,
});

在这里插入图片描述
2、PolylineGlowMaterialProperty --折线轮廓
在这里插入图片描述
有以下几个属性:
color :指定折线的颜色 。
outlineColor :获取或设置指定轮廓的 Color 的属性。
outlineWidth :获取或设置数字属性,指定轮廓的宽度。

polyline.material = new Cesium.PolylineOutlineMaterialProperty({
    color: Cesium.Color.RED,
    outlineWidth: 3,
    outlineColor: Cesium.Color.BLACK,
});

在这里插入图片描述

### 如何在 Cesium 中创建自定义材质Cesium 中,创建自定义材质可以通过 `Material` 类来完成。以下是关于如何利用 Cesium 的功能以及结合 Vue 实现带方向滚动路线的具体方法。 #### 材质的基础概念 Cesium 提供了一个强大的机制用于创建和管理材质。通过 `Material` 对象可以定义表面的颜色、纹理以及其他视觉效果。为了实现更复杂的材质效果,通常会使用 GLSL (OpenGL Shading Language) 编写片段着色器代码[^1]。 #### 自定义材质类 PolylineImageTrailMaterialProperty 要创建一个具有特定行为的材质(如带有方向滚动的效果),需要继承并扩展 `MaterialProperty` 类。这一步骤允许开发者定义动态变化的属性值,比如颜色渐变或基于时间的变化效果。具体来说: - **PolylineImageTrailMaterialProperty** 是一种专门设计用来控制多边形线条外观的材质属性对象。 - 它能够接受参数输入,例如图片路径、速度因子等,并将这些数据传递给底层渲染管线以生成最终显示效果。 #### 利用 czm_frameNumber 进行动画处理 对于涉及动画效果的情况,Cesium 内置了一种非常有用的全局变量——`czm_frameNumber`。该 uniform 变量代表当前场景正在执行到哪一帧的画面更新操作,在每一帧之间它会被自动加 1。因此,如果希望某些图形随着时间推移而改变形态,则可以直接依赖此数值作为计算依据之一[^2]。 下面是一个简单的例子展示了如何运用上述原理制作一条沿指定轨迹移动光斑的线段: ```javascript class CustomMaterial extends Cesium.Material { constructor(options){ super(); this._definitionChanged = new Cesium.Event(); const glsl = ` void main(){ float frame = czm_frameNumber / 60.; // 假设每秒刷新率为60Hz vec4 colorA = vec4(1.,0.,0.,1.); vec4 colorB = vec4(0.,1.,0.,1.); vec4 finalColor; if(mod(frame,2.)<1.) finalColor=colorA; else finalColor=colorB; czm_material.alpha = finalColor.a; czm_material.diffuse = finalColor.rgb; } `; this._type = 'Custom'; this._glslText = glsl; this._options = options || {}; } getType() {return this._type;} getGlslDefinition(){return this._glslText;} } // 注册新类型材料以便后续引用 Cesium.Material.CustomType=CUSTOMMATERIAL; let entity=viewer.entities.add({ polyline:{ positions:Cesium.Cartesian3.fromDegreesArray([-75.5986,40.039,-75.5986,39]), width:5, material:new CustomMaterial() } }); ``` 以上脚本定义了一个全新的 Material 子类别名为 `CustomMaterial` ,并通过重载其内部函数实现了交替闪烁红绿两色的功能演示。 ### 注意事项 当尝试构建更加复杂或者性能敏感的应用程序时,请务必注意以下几点: - 尽可能减少不必要的状态切换次数; - 预加载所有必要的资源文件以防运行期间发生阻塞现象; - 合理设置缓存策略提高重复访问效率。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

龟中的程序员

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值