CODEWITHSUNDEEP
javascriptcesiumjs
maomaofreedom
maomaofreedom

Reputation: 31

How to display data underground in cesium.js?

I want to display a polyline underground in cesium.js. But I have no idea about this.

Upvotes: 3

Views: 2856

Answers (2)

YinchaoOnline
YinchaoOnline

Reputation: 188

It seems that cesium has not provided official underground function for the reason that cesium cameral can not be placed undergroud,but the underground effect can be gained by an alternative way--translucent terrain.

According How to display underground entity? in Cesium-dev google group,I have achieved a barely satisfactory approach to showing the entity(including gltf models) underground.The displaying effect is as what the GIF file shows.This appoach contains mainly 3 steps.

enter image description here For gif, see here.

1.change only one line code in cesium source code;get the cesium source code,then find the file named GlobeSurfaceTileProvider.js,change

command.pass = Pass.GLOBE;

to

command.pass = Pass.TRANSLUCENT;

2.generate the cesium release code with gulp tool;use your CLI to execute gulp release. PS： You may need set your node environment and install the dependency node modules and install gulp tool.

3.Implemention code.PS: note the following snippet can run only if you have changed the cesium source code which is illustrated in step one.

<!DOCTYPE html>
<html lang="en">

<head>
    <!-- Use correct character set. -->
    <meta charset="utf-8">
    <!-- Tell IE to use the latest, best version. -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- Make the application on mobile take up the full browser screen and disable user scaling. -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <title>Hello World!</title>
    <script src="../Build/Cesium/Cesium.js"></script>
    <style>
        @import url(../Build/Cesium/Widgets/widgets.css);
        html,
        body,
        #cesiumContainer {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
            position: relative;
        }

        .tools {
            position: absolute;
            top: 20px;
            left: 20px;
            width: 100px;
        }
    </style>
</head>

<body>
    <div class="container">
        <div id="cesiumContainer">
        </div>
        <div class="tools">
            Opacity: <input id="btnImageryAlpha" type="range" min="0" max="10" value="10" oninput="change()" />
        </div>
    </div>
    <script>
        function change() {
            var value = document.getElementById("btnImageryAlpha").value;
            if (viewer.imageryLayers) {
                for (var i = 0; i < viewer.imageryLayers.length; i++) {
                    viewer.imageryLayers.get(i).alpha = value / 10;
                }
            }
            console.log(value);
        }

        var terrainProvider = new Cesium.CesiumTerrainProvider({
            url: 'https://assets.agi.com/stk-terrain/v1/tilesets/world/tiles',
            requestVertexNormals: true
        });
        var viewer = new Cesium.Viewer('cesiumContainer', {
            //skyAtmosphere: false,
            //orderIndependentTranslucency: false,
            baseLayerPicker: false,
            terrainProvider: terrainProvider
        });
        //viewer.scene.globe.depthTestAgainstTerrain = false;
        //change the ugly blue color to black
        viewer.scene.globe.baseColor = new Cesium.Color(0, 0, 0, 0);
        //default is 1
        //viewer.scene.globe.imageryLayers.get(0).alpha = 0.5;

        var blueBox = viewer.entities.add({
            name: 'Blue box',
            position: Cesium.Cartesian3.fromDegrees(-114.0, 40.0, 5),
            box: {
                dimensions: new Cesium.Cartesian3(400000.0, 300000.0, 500000.0),
                material: Cesium.Color.BLUE
            }
        });

        viewer.zoomTo(blueBox);
    </script>
</body>

</html>

Upvotes: 2

Zac
Zac

Reputation: 2211

Yes, this is supported in cesium. It can be hard to see sometimes since the camera cannot go bellow the ellipsoid.

var viewer = new Cesium.Viewer('cesiumContainer');

var purpleArrow = viewer.entities.add({
    name : 'Purple straight arrow at height',
    polyline : {
        positions : Cesium.Cartesian3.fromDegreesArrayHeights([-75, 43, -200000,
                                                               -90, 43, -200000]),
        width : 10,
        followSurface : false,
        material : new Cesium.PolylineArrowMaterialProperty(Cesium.Color.PURPLE)
    }
});

viewer.zoomTo(viewer.entities);

Live

Upvotes: 0

Related Questions