经纬志
首页 / Cesium / 使用示例

模型轮廓描边

边缘高亮是最轻量的状态提示。描边宽度稍微动一动,选中与告警就有了呼吸感,而材质完全不用改。

CesiumJS 1.121 · 更新 2026-10-28
源码与运行效果
运行效果

这个示例在做什么

模型边缘多出一圈蓝色描边,宽度在 0 到 3 像素之间往复变化。 描边沿模型轮廓生成,因此在复杂造型上也能贴合外缘,比后期描边效果更干净。

silhouetteSize 控制描边宽度,silhouetteColor 控制颜色。 真实项目里它常用来表达选中、悬停、告警等状态:状态一变,只改这两个参数, 不用换材质。描边对性能有额外开销,大批量模型同时开启要留意帧率。

关键接口

接口作用
model.silhouetteSize描边宽度,0 表示关闭
model.silhouetteColor描边颜色,可用透明度做呼吸效果
scene.postRender逐帧调整参数做动画
silhouetteAlpha描边整体透明度,叠加发光感时有用

可以直接改的地方

位置改什么效果
t * 3改成 t * 8描边更粗
#4d9bff换成 #ff5c5c改成告警色
Math.sin(...)换成固定值 2常亮描边,不做呼吸
silhouetteAlpha设为 0.5半透明描边

替代说明:官方示例演示瓦片边缘可见性与描边处理,数据来自 ion。 这里用代码生成的 GLB 模型展示同一组描边参数;对 tileset 里的要素, 对应做法是给拾取到的 Cesium3DTileFeature 设置 silhouetteSize。