3D模型GLB-源代码示例 运行 重置

                    <!DOCTYPE html>
<html>

<head>
    <meta charset='UTF-8' />
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <link href='http://bigemap.com:9000/bigemap-gl.js/v1.1.0/Widgets/widgets.css' rel='stylesheet' />
    <script src='http://bigemap.com:9000/bigemap-gl.js/v1.1.0/bigemap-gl.js'></script>
    <script src="/templates/bmgl-header.js"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #container {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }

        .bmgl-widget-credits {
            display: none
        }

        #toolbar {
            position: absolute;
            background: rgba(212, 212, 212, 0.8);
            padding: 4px;
            border-radius: 4px;
        }

        #toolbar input {
            vertical-align: middle;
            padding-top: 2px;
            padding-bottom: 2px;
        }

        #toolbar .header {
            font-weight: bold;
        }
    </style>
    <title>Google Map Streets</title>
</head>

<body>
    <div id='container'></div>
    <div id="loadingOverlay">
        <h1>Loading...</h1>
    </div>
    <div id="toolbar">
        <table>
            <tbody>
                <tr>
                    <td class="header">模型颜色r</td>
                </tr>
                <tr>
                    <td>模型</td>
                    <td>
                        <select data-bind="options: colorBlendModes, value: colorBlendMode"></select>
                    </td>
                </tr>
                <tr>
                    <td>颜色</td>
                    <td><select data-bind="options: colors, value: color"></select></td>
                </tr>
                <tr>
                    <td>透明度</td>
                    <td>
                        <input type="range" min="0.0" max="1.0" step="0.01"
                            data-bind="value: alpha, valueUpdate: 'input'">
                        <input type="text" size="5" data-bind="value: alpha">
                    </td>
                </tr>
                <tr>
                    <td data-bind="style: { color: colorBlendAmountEnabled ? '' : 'gray'}">
                        最大值
                    </td>
                    <td>
                        <input type="range" min="0.0" max="1.0" step="0.01"
                            data-bind="value: colorBlendAmount, valueUpdate: 'input', enable: colorBlendAmountEnabled">
                        <input type="text" size="5"
                            data-bind="value: colorBlendAmount, enable: colorBlendAmountEnabled">
                    </td>
                </tr>
                <tr>
                    <td class="header">模型轮廓</td>
                </tr>
                <tr>
                    <td>颜色</td>
                    <td>
                        <select data-bind="options: silhouetteColors, value: silhouetteColor"></select>
                    </td>
                </tr>
                <tr>
                    <td>透明度</td>
                    <td>
                        <input type="range" min="0.0" max="1.0" step="0.01"
                            data-bind="value: silhouetteAlpha, valueUpdate: 'input'">
                        <input type="text" size="5" data-bind="value: silhouetteAlpha">
                    </td>
                </tr>
                <tr>
                    <td>尺寸大小</td>
                    <td>
                        <input type="range" min="0.0" max="10.0" step="0.01"
                            data-bind="value: silhouetteSize, valueUpdate: 'input'">
                        <input type="text" size="5" data-bind="value: silhouetteSize">
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

    <script>
        bmgl.Config.HTTP_URL = 'http://bigemap.com:9000';
        var viewer = new bmgl.Viewer('container', { mapId: 'bigemap.googlemap-satellite',requestRenderMode:false});


        var entity;

        //获取混色
        function getColorBlendMode(colorBlendMode) {
            return bmgl.ColorBlendMode[colorBlendMode.toUpperCase()];
        }

        //获取颜色
        function getColor(colorName, alpha) {
            var color = bmgl.Color[colorName.toUpperCase()];
            return bmgl.Color.fromAlpha(color, parseFloat(alpha));
        }

        // The viewModel tracks the state of our mini application.
        //绑定参数
        var viewModel = {
            color: "Red",
            colors: ["White", "Red", "Green", "Blue", "Yellow", "Gray"],
            alpha: 1.0,
            colorBlendMode: "Highlight",
            colorBlendModes: ["Highlight", "Replace", "Mix"],
            colorBlendAmount: 0.5,
            colorBlendAmountEnabled: false,
            silhouetteColor: "Red",
            silhouetteColors: ["Red", "Green", "Blue", "Yellow", "Gray"],
            silhouetteAlpha: 1.0,
            silhouetteSize: 2.0,
        };

        // Convert the viewModel members into knockout observables.
        bmgl.knockout.track(viewModel);

        // Bind the viewModel to the DOM elements of the UI that call for it.
        var toolbar = document.getElementById("toolbar");
        bmgl.knockout.applyBindings(viewModel, toolbar);

        bmgl.knockout
            .getObservable(viewModel, "color")
            .subscribe(function (newValue) {
                entity.model.color = getColor(newValue, viewModel.alpha);
            });

        bmgl.knockout
            .getObservable(viewModel, "alpha")
            .subscribe(function (newValue) {
                entity.model.color = getColor(viewModel.color, newValue);
            });

        bmgl.knockout
            .getObservable(viewModel, "colorBlendMode")
            .subscribe(function (newValue) {
                var colorBlendMode = getColorBlendMode(newValue);
                entity.model.colorBlendMode = colorBlendMode;
                viewModel.colorBlendAmountEnabled =
                    colorBlendMode === bmgl.ColorBlendMode.MIX;
            });

        bmgl.knockout
            .getObservable(viewModel, "colorBlendAmount")
            .subscribe(function (newValue) {
                entity.model.colorBlendAmount = parseFloat(newValue);
            });

        bmgl.knockout
            .getObservable(viewModel, "silhouetteColor")
            .subscribe(function (newValue) {
                entity.model.silhouetteColor = getColor(
                    newValue,
                    viewModel.silhouetteAlpha
                );
            });

        bmgl.knockout
            .getObservable(viewModel, "silhouetteAlpha")
            .subscribe(function (newValue) {
                entity.model.silhouetteColor = getColor(
                    viewModel.silhouetteColor,
                    newValue
                );
            });

        bmgl.knockout
            .getObservable(viewModel, "silhouetteSize")
            .subscribe(function (newValue) {
                entity.model.silhouetteSize = parseFloat(newValue);
            });


        createModel(
            "/templates/glb/bmgl_Air.glb",
            5000.0
        );

        // 添加模型
        function createModel(url, height) {
            viewer.entities.removeAll();

            var position = bmgl.Cartesian3.fromDegrees(
                -123.0744619,
                44.0503706,
                height
            );
            var heading = bmgl.Math.toRadians(135);
            var pitch = 0;
            var roll = 0;
            var hpr = new bmgl.HeadingPitchRoll(heading, pitch, roll);
            var orientation = bmgl.Transforms.headingPitchRollQuaternion(
                position,
                hpr
            );

            entity = viewer.entities.add({
                name: url,
                position: position,
                orientation: orientation,
                model: {
                    uri: url,
                    minimumPixelSize: 128,
                    maximumScale: 20000,
                    color: getColor(viewModel.color, viewModel.alpha),
                    colorBlendMode: getColorBlendMode(viewModel.colorBlendMode),
                    colorBlendAmount: parseFloat(viewModel.colorBlendAmount),
                    silhouetteColor: getColor(
                        viewModel.silhouetteColor,
                        viewModel.silhouetteAlpha
                    ),
                    silhouetteSize: parseFloat(viewModel.silhouetteSize),
                },
            });
            viewer.trackedEntity = entity;
            viewer.zoomTo(entity)
        }

        var options = [
            {
                text: "飞机",
                onselect: function () {
                    createModel(
                        "/templates/glb/bmgl_Air.glb",
                        5000.0
                    );
                },
            },
            {
                text: "运输车",
                onselect: function () {
                    createModel(
                        "/templates/glb/GroundVehicle.glb",
                        0
                    );
                },
            },
            {
                text: "热气球",
                onselect: function () {
                    createModel(
                        "/templates/glb/bmglBalloon.glb",
                        1000.0
                    );
                },
            },
            {
                text: "牛奶卡车",
                onselect: function () {
                    createModel(
                        "/templates/glb/bmglMilkTruck.glb",
                        0
                    );
                },
            },
            {
                text: "个性人物",
                onselect: function () {
                    createModel(
                        "/templates/glb/bmgl_Man.glb",
                        0
                    );
                },
            },
        ];

        Sandcastle.addToolbarMenu(options);




    </script>
</body>

</html>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            
源码