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

半透明盒体与棱线

同样的三个盒体准备了两套外观:一套 alpha 0.38 且不剔除背面, 另一套完全不透明。按钮切换,直观看到差别。

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

颜色写在实例上

PerInstanceColorAppearance 从每个 GeometryInstance 的 color 属性取颜色, 因此一批盒体可以共用一次绘制调用,各自保持不同颜色与透明度。 颜色必须用 ColorGeometryInstanceAttribute.fromColor 包装。

两个开关

translucent: true 打开混合,alpha 才会被尊重; 设为 false 时颜色里的透明度被忽略。示例用两个 Primitive 分别持有两套外观,靠 show 切换,避免运行时修改外观状态 触发渲染状态重建。

closed: false 表示几何不封闭,背面不剔除。 半透明盒体如果不关掉剔除,从正面看进去只能看到外表面一层; 关掉之后能看到内壁,透明感更强。

可调参数

位置改什么效果
外观切换按钮半透明 / 不透明对比混合与遮挡
makeInstances(0.38)改成 0.75盒体更实,背后的板子更难看清
closed改成 true内壁消失
flat改成 true改用平面法线,表面变平

半透明必然有排序问题。多个透明盒体互相遮挡时,最终颜色取决于绘制顺序, 转动相机可能看到颜色跳变。这是透明渲染的固有限制, 需要稳定结果时改用不透明加深浅分层。