GlobeTranslucency

GlobeTranslucency 是一种与地球表面透明度有关的效果，它在 CesiumJS 3D 地球模型中被广泛使用。该效果可以使地球表面变得具有半透明的特性，从而在显示其他实体对象时提供更好的可视性和空间感。本文将详细介绍 GlobeTranslucency 的使用方法和相关属性。

基本对象

GlobeTranslucency 对象是在 Cesium.DefinedGlobeMaterial 类的基础上进行扩展的。 GlobeTranslucency 对象提供了一个 translucency 属性，用于设置透明度值。该对象的使用需要先引入 Cesium.js 库文件。

var viewer = new Cesium.Viewer("cesiumContainer");
var globeMat = new Cesium.GlobeTranslucencyMaterialProperty({
    // 设置透明度值
    translucency: 0.5,
    // 设置地球表面指定的 Material
    material: someMaterial
});
var globeTranslucency = new Cesium.Entity({
    name: "Translucent Globe",
    description: "This is a translucent globe.",
    position: Cesium.Cartesian3.zero,
    globe: viewer.scene.globe,
    // 应用 GlobeTranslucency 材质
    material: globeMat
});

viewer.entities.add(globeTranslucency);

该代码创建了一个 GlobeTranslucency 对象，并将其应用于 Cesium.Entity 对象。这将导致在场景中创建一个半透明的地球体，其透明度值为 0.5。

属性

GlobeTranslucency 对象提供了许多参数，可以根据具体需要进行定制：

• translucency：透明度值（默认值：0.0）。
• material：应用于地球表面的 Material 对象（必填）。

var globeMat = new Cesium.GlobeTranslucencyMaterialProperty({
    translucency: 0.5,
    material: someMaterial
});

方法

GlobeTranslucency 对象也提供了一些方法，用于在地球表面应用该效果。

• remove(entity)：从指定 Cesium.Entity 对象中删除 GlobeTranslucency 材质。
• isTranslucent()：获取 GlobeTranslucency 材质当前是否为半透明状态。

// 删除 GlobeTranslucency 材质
globeTranslucency.material.remove(globeMat);
// 获取当前状态是否为半透明
if (globeMat.isTranslucent()) { ... }

示例

以下示例将创建一个具有半透明效果的地球表面。在点击地球时，切换地球的半透明效果。

var viewer = new Cesium.Viewer("cesiumContainer", {
    shouldAnimate: true
});
var primitive, handler;

// 创建 GlobeTranslucency 材质
var someMaterial = new Cesium.Material({
    fabric: {
        uniforms: {
            color: new Cesium.Color(1.0, 0.0, 0.0, 1.0)
        },
        source: "czm_material czm_translucent;\n\
                void main()\n\
                {\n\
                  gl_FragColor = czm_translucent * color;\n\
                }"
    }
});
var globeMat = new Cesium.GlobeTranslucencyMaterialProperty({
    translucency: 0.5,
    material: someMaterial
});
var globeTranslucency = new Cesium.Entity({
    name: "Translucent Globe",
    description: "This is a translucent globe.",
    position: Cesium.Cartesian3.zero,
    globe: viewer.scene.globe,
    material: globeMat
});

// 将 GlobeTranslucency 添加到场景中
viewer.entities.add(globeTranslucency);

// 设置单击事件，切换 GlobeTranslucency 的半透明效果
handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction(function(event) {
    if (!primitive) {
        primitive = viewer.scene.primitives.add(new Cesium.CircleGeometry({
            center: event.position,
            radius: 200000.0,
            vertexFormat: Cesium.VertexFormat.POSITION_AND_COLOR
        }));
        someMaterial.uniforms.color = new Cesium.Color(0.0, 1.0, 0.0, 1.0);
        globeMat.remove(globeTranslucency);
    } else {
        viewer.scene.primitives.remove(primitive);
        primitive = undefined;
        someMaterial.uniforms.color = new Cesium.Color(1.0, 0.0, 0.0, 1.0);
        viewer.entities.add(globeTranslucency);
    }
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);

参考

• Cesiumjs GlobeTranslucency
• Cesiumjs DefinedGlobeMaterial
• Cesiumjs Entity