Cesium快速入门19:Entity折线材质

上一节课我们把"面"的材质讲完了,今天换"线"------折线(Polyline)。

不管是道路、航线还是飞线特效,全靠下面几种现成材质,一句代码就能换皮肤。


一、最朴素的红线

先画两个点,宽度 5 像素,纯红色,跑通流程。

复制代码
viewer.entities.add({
  name: "polyline",
  polyline: {
    positions: Cesium.Cartesian3.fromDegreesArray([112.0, 23.1, 115.4, 23.1]), // 起点、终点
    width: 5,                                           // 线宽(像素)
    material: Cesium.Color.RED,                        // 纯色材质
  },
});

刷新后一条笔直的红线横跨屏幕,平平无奇,却是后面所有花样的地基。


二、虚线------PolylineDashMaterialProperty

想让线变成"一短一长"的虚线?用 PolylineDashMaterialProperty,可调颜色、段长、偏移量。

复制代码
const polyLineDashedMaterial = new Cesium.PolylineDashMaterialProperty({
  color: Cesium.Color.YELLOW, // 虚线颜色
  dashOffset: 16,             // 单段虚线长度(像素越大越长)
});

把 material: polyLineDashedMaterial 替换进去,就能看到黄色虚线。
dashOffset 从 16 改成 30,段长翻倍,视觉更稀疏。


三、箭头线------PolylineArrowMaterialProperty

一条线从头粗到尾,末端自带箭头,做"流向"提示最直观。

复制代码
const polyLineArrowMaterial = new Cesium.PolylineArrowMaterialProperty(
  Cesium.Color.YELLOW // 箭头颜色
);

换材质后,线瞬间变成"箭头跑道",方向永远从起点指向终点。


四、发光飞线------PolylineGlowMaterialProperty

做"飞线"特效全靠它:中间亮、两边暗,还能控制粗细衰减。

复制代码
const polyLineGlowMaterial = new Cesium.PolylineGlowMaterialProperty({
  color: Cesium.Color.YELLOW,
  glowPower: 0.3,   // 发光强度 0--1,越大越亮
  taperPower: 0.1,  // 尾部收缩程度 0--1,越大越早变细
});

参数秒懂:

  • glowPower = 0.8 时,整条线"胖"到几乎成带子;

  • taperPower = 1 时,线身几乎无渐变,失去"飞线"尾巴。

    常用组合:glowPower: 0.3、taperPower: 0.1,既有光晕又有尾巴。


五、小结

折线换皮肤只要记住三步:

  1. 选材质类(Dash / Arrow / Glow ...);

  2. 调参数;

  3. 把实例赋给 polyline.material。

官方给的这几种线型已能 cover 80% 场景,想要更炫的脉冲、渐隐、彩虹渐变?后面我们上手自定义着色器,再带大家手写"神仙飞线"。

相关推荐
Martina_032113 小时前
AI生成3D场景的霓虹灯一开就糊成光团?用6步检查Emissive、Bloom与曝光
人工智能·3d·ai·自然语言处理·游戏引擎·材质·贴图
ue星空14 小时前
UE径向模糊+色差材质制作
材质
总要学点什么17 小时前
第98篇:三维特效-材质线效果——给一条线换十种材质,虚线的图案只填了一半
开发语言·前端·javascript·ecmascript·gis·webgl·材质
Martina_03211 天前
AI生成3D场景从白模换成精模后镜头全偏了?用6步检查单位、枢轴与层级替换
图像处理·人工智能·3d·ai·自然语言处理·材质·1024程序员节
我喜欢就喜欢1 天前
倾斜摄影 OSGB 进 Cesium 对不齐?先核 SRS、原点偏移和瓦片路径
gis·cesium·倾斜摄影·osgb·3d tiles
时间的情敌2 天前
Cesium 加载 3D Tiles 倾斜摄影、压平、样式设置(Vue3 实战)
vue.js·3d·cesium
敢敢のwings2 天前
机器人如何通过触觉认识物体:从材质分类到接触状态判断
分类·机器人·材质
AGI_Eval4 天前
AI 3D生成技术:从“可用”走向“可靠”还有多远?
人工智能·3d
翌日阳5 天前
二十分之一的压缩比:Spatial Vivid 1.0 把 3DGS 全链路参考实现按 MIT 开源了
3d·开源
Dream-Y.ocean5 天前
鸿蒙PC平台宅匠 3D 室内设计适配实战:基于 Electron 壳方案的 Three.js 双渲染引擎与参数化户型编辑器开发
javascript·3d·harmonyos