首页 / Cesium / 使用示例
模型轮廓描边
边缘高亮是最轻量的状态提示。描边宽度稍微动一动,选中与告警就有了呼吸感,而材质完全不用改。
源码与运行效果
这个示例在做什么
模型边缘多出一圈蓝色描边,宽度在 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。