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

模型逐实例着色

同一个模型加载三份,分别用高亮、混合、替换三种着色模式,颜色与模型原色如何叠加一目了然。

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

三种混合模式的区别

HIGHLIGHT 只用颜色给模型染色,保留原有的明暗关系;REPLACE 直接用颜色覆盖模型颜色,明暗仍然保留;MIX 按 colorBlendAmount 在两者之间插值。

三个实例并排摆放,切换下拉框就能看到同一份模型文件的不同染色结果。

颜色写在模型上而不是材质里

model.color 属于着色层,模型文件里的材质参数不变。同一个 GLB 因此可以摆出三份不同颜色的实例,不必为每种颜色准备一份模型文件。

可以直接改的地方

位置改什么效果
model.color换成任意 Cesium.Color三个实例的染色
model.colorBlendModeHIGHLIGHT / MIX / REPLACE染色方式
model.colorBlendAmount0 到 1 之间取小数MIX 时的混合比例

模型从哪来:页面里的 GLB 由代码在内存中拼成,没有下载任何模型文件,因此断网只影响 Cesium CDN 本身。