What I hope to achieve is to make the canvas tag of Cesium completely transparent, displaying only the objects that are drawn. The background of the canvas should also be transparent. However, the code I am using does not work

CesiumJS
1
Cesium Simple Geometry @import url("https://cesium.com/downloads/cesiumjs/releases/1.88/Build/Cesium/Widgets/widgets.css"); html, body, #cesiumContainer { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; } 
    canvas {
        background: transparent !important;
    }

    body {
        margin: 0;
        padding: 0;
        overflow: hidden;
    }

    #cesiumContainer {
        width: 800px;
        /* 定义你想要的宽度 */
        height: 600px;
        /* 定义你想要的高度 */
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: transparent;
    }

    #cesiumContainer canvas {
        width: 100% !important;
        height: 100% !important;
        position: absolute;
        top: 0;
        left: 0;
        background: transparent !important;
    }

    body {
        background-color: #4d7554;
    }
</style>

<div id="cesiumContainer"></div>
<script>
    // var canvas = document.getElementById('cesiumContainer');  
    // var context = canvas.getContext('webgl', { alpha: true });  

    // Create the Cesium Viewer without terrain and base imagery  
    var viewer = new Cesium.Viewer('cesiumContainer', {
        imageryProvider: false, // Disable default imagery  
        baseLayerPicker: false, // Hide the base layer picker  
        terrainProvider: false, // Disable terrain  
        geocoder: false, // Disable geocoder  
        homeButton: false, // Disable home button  
        sceneModePicker: false, // Disable scene mode picker  
        navigationHelpButton: false, // Disable navigation help button  
        animation: false, // Disable animation widget  
        timeline: false, // Disable timeline widget  
        skyBox: false, // Disable skyBox  
        skyAtmosphere: false,// Disable skyAtmosphere  
        scene3DOnly: true,
        shadows: false, 
        // context: context,
    });
    viewer.scene.backgroundColor = new Cesium.Color(0, 0, 0, 0);
    // viewer.scene.backgroundColor = new Cesium.Color(0, 0, 0, 0.5);  
    // viewer.scene.backgroundColor = new Cesium.Color(255, 255,255, 0);
    viewer.scene.globe.baseColor =  Cesium.Color.TRANSPARENT;

    // var canvas = document.querySelector('canvas');  
    // var context = canvas.getContext('webgl', { alpha: true });  

    // Add a simple box geometry  
    var boxEntity = viewer.entities.add({
        name: 'Box',
        // Specify longitude, latitude, and altitude  
        position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883, 0),
        box: {
            dimensions: new Cesium.Cartesian3(400000.0, 300000.0, 500000.0),
            material: Cesium.Color.RED.withAlpha(0.5),
            outline: true,
            outlineColor: Cesium.Color.BLACK
        }
    });

    // Fly to the box  
    viewer.camera.flyTo({
        destination: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883, 1000000.0)
    });  
</script>
2

You should be able to make the canvas transparent by setting the background color to transparent. Here’s a sandcastle showing that off: transparent background. Is this the effect you’re trying to achieve?

Just note you may see an extra black band around the earth with this method if you don’t turn the atmosphere off as shown in this issue

1 Like