cesium-study
/
26.环境光吸收.html

<!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>
    <script src="js/jquery.min.js"></script>
    <style>
        @import url(Build/Cesium/Widgets/widgets.css);

        html,
        body,
        #cesiumContainer {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div id="cesiumContainer" class="fullSize"></div>
    <div id="loadingOverlay"><h1>Loading...</h1></div>
    <div id="toolbar">
        <table>
            <tbody>
                <tr>
                    <td>Ambient Occlusion</td>
                    <td><input type="checkbox" data-bind="checked: show"></td>
                </tr>
                <tr>
                    <td>Ambient Occlusion Only</td>
                    <td>
                        <input type="checkbox" data-bind="checked: ambientOcclusionOnly">
                    </td>
                </tr>
                <tr>
                    <td>Intensity</td>
                    <td>
                        <input type="range" min="1" max="10" step="1" data-bind="value: intensity, valueUpdate: 'input'">
                    </td>
                </tr>
                <tr>
                    <td>Length Cap</td>
                    <td>
                        <input type="range" min="0" max="1" step="0.01" data-bind="value: lengthCap, valueUpdate: 'input'">
                    </td>
                </tr>
                <tr>
                    <td>Step Size</td>
                    <td>
                        <input type="range" min="1" max="10" step="0.01" data-bind="value: stepSize, valueUpdate: 'input'">
                    </td>
                </tr>
                <tr>
                    <td>Bias</td>
                    <td>
                        <input type="range" min="0" max="1" step="0.01" data-bind="value: bias, valueUpdate: 'input'">
                    </td>
                </tr>
                <tr>
                    <td>Blur Step Size</td>
                    <td>
                        <input type="range" min="0" max="4" step="0.01" data-bind="value: blurStepSize, valueUpdate: 'input'">
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

    <script>

        //创建一个基本地球
        let viewer = new Cesium.Viewer("cesiumContainer", {
            imageryProvider: new Cesium.WebMapTileServiceImageryProvider({
                url: 'http://t0.tianditu.gov.cn/img\_w/wmts?tk=0702d09e30dca11ed07ba4cec6d6bdac',
                layer: 'img',
                style: 'default',
                tileMatrixSetID: 'w',
                format: 'tiles',
                maximumLevel: 18
            }),
            //animation: false, //动画控制，默认true （图中1）
            //baseLayerPicker: false,//地图切换控件(底图以及地形图)是否显示,默认显示true  （图中6）
            //fullscreenButton: true,//全屏按钮,默认显示true  （图中4）
            //geocoder: false,//地名查找,默认true  （图中9）
            //timeline: false,//时间线,默认true  （图中3）
            //vrButton: false,//双屏模式,默认不显示false
            //homeButton: true,//主页按钮，默认true  （图中8）
            //infoBox: false,//点击要素之后显示的信息,默认true
            //selectionIndicator: true//选中元素显示,默认true
        });
        viewer.cesiumWidget.creditContainer.style.display = "none";//去cesium logo水印

        viewer.scene.debugShowFramesPerSecond = true;//开启帧数
        //viewer.scene.globe.enableLighting = true;
        //viewer.shadows = true;
        //添加数据


        ////添加3dtiles

        var tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
            //  url: '测试辅助文件/Lab导出环氧乙烷/tileset.json', //数据路径
            //url: '测试辅助文件/张单单大厦/tileset.json', //数据路径
            url: '测试辅助文件/测试小模型/tileset.json', //数据路径
            maximumScreenSpaceError: 16, //最大的屏幕空间误差，数值越小，显示越精细
            maximumNumberOfLoadedTiles: 1000, //最大加载瓦片个数
            // modelMatrix: m //形状矩阵
        }));

        var boundingSphere = new Cesium.BoundingSphere(Cesium.Cartesian3.fromDegrees(116.390123, 39.90691, 0), 1);

        viewer.camera.flyToBoundingSphere(boundingSphere, { duration: 0 });


        var utc = Cesium.JulianDate.fromDate(new Date("2019/10/04 10:30:00"));//UTC
        viewer.clockViewModel.currentTime = Cesium.JulianDate.addHours(utc, 8, new Cesium.JulianDate());//北京时间=UTC+8=GMT+8
        //var viewer = new Cesium.Viewer("cesiumContainer");

        if (!Cesium.PostProcessStageLibrary.isAmbientOcclusionSupported(viewer.scene)) {
            window.alert(
                "This browser does not support the ambient occlusion post process."
            );
        }

        // Power Plant design model provided by Bentley Systems
        var tileset = new Cesium.Cesium3DTileset({
            url: Cesium.IonResource.fromAssetId(8564),
        });
        //tileset.readyPromise
        //    .then(function (tileset) {
        //        viewer.scene.primitives.add(tileset);
        //    })
        //    .otherwise(function (error) {
        //        console.log(error);
        //    });

        var viewModel = {
            show: true,
            ambientOcclusionOnly: false,
            intensity: 8.0,//强度1-10，越大越黑
            bias: 0.1,//强度2，断断续续的那种0-1
            lengthCap: 0.02,//内容，数值太大之后会变的不好看0-1，长度有关，越大长度越多
            stepSize: 1.0,//范围大小1-10，越大范围越大
            blurStepSize: 0.86,//模糊和清晰0-4.越大越模糊
        };

        Cesium.knockout.track(viewModel);
        var toolbar = document.getElementById("toolbar");
        Cesium.knockout.applyBindings(viewModel, toolbar);
        for (var name in viewModel) {
            if (viewModel.hasOwnProperty(name)) {
                Cesium.knockout
                    .getObservable(viewModel, name)
                    .subscribe(updatePostProcess);
            }
        }

        function updatePostProcess() {
            var ambientOcclusion =
                viewer.scene.postProcessStages.ambientOcclusion;
            ambientOcclusion.enabled =
                Boolean(viewModel.show) || Boolean(viewModel.ambientOcclusionOnly);
            ambientOcclusion.uniforms.ambientOcclusionOnly = Boolean(
                viewModel.ambientOcclusionOnly
            );
            ambientOcclusion.uniforms.intensity = Number(viewModel.intensity);
            ambientOcclusion.uniforms.bias = Number(viewModel.bias);
            ambientOcclusion.uniforms.lengthCap = Number(viewModel.lengthCap);
            ambientOcclusion.uniforms.stepSize = Number(viewModel.stepSize);
            ambientOcclusion.uniforms.blurStepSize = Number(
                viewModel.blurStepSize
            );
        }
        updatePostProcess();

            //var camera = viewer.scene.camera;
            //camera.position = new Cesium.Cartesian3(
            //    1234127.2294710164,
            //    -5086011.666443127,
            //    3633337.0413351045
            //);
            //camera.direction = new Cesium.Cartesian3(
            //    -0.5310064396211631,
            //    -0.30299013818088416,
            //    -0.7913464078682514
            //);
            //camera.right = new Cesium.Cartesian3(
            //    -0.8468592075426076,
            //    0.1574051185945647,
            //    0.507989282604011
            //);
            //camera.up = Cesium.Cartesian3.cross(
            //    camera.right,
            //    camera.direction,
            //    new Cesium.Cartesian3()
            //);

    </script>
</body>
</html>