master

分支 (1)

管理

管理

master

cesium-study
/
49.使用Entity加载glTF-官网代码.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"></div>
    <script>

        //创建一个基本地球
        var viewer = new Cesium.Viewer("cesiumContainer", {
            infoBox: false,
            selectionIndicator: false,
            shadows: true,
            shouldAnimate: true,
        });


        //添加数据

        //添加文字
        viewer.entities.add({
            name: '文字',
            position: Cesium.Cartesian3.fromDegrees(116.3904715, 39.90571),
            label: {
                text: '看这里',
                font: '19px Helvetica',
                style: Cesium.LabelStyle.FILL_AND_OUTLINE,
                fillColor: Cesium.Color.AZURE,
                outlineColor: Cesium.Color.BLACK,
                outlineWidth: 3,
                verticalOrigin: Cesium.VerticalOrigin.BOTTOM, //垂直方向以底部来计算标签的位置
            }
        });


        //加载实体glTF


        var position = Cesium.Cartesian3.fromDegrees(116.3904715, 39.90571, 1);
        var heading = Cesium.Math.toRadians(135);
        var pitch = 0;
        var roll = 0;
        var hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);
        var orientation = Cesium.Transforms.headingPitchRollQuaternion(
            position,
            hpr
        );

        var entity = viewer.entities.add({
            name: "123",
            position: position,
            orientation: orientation,
            model: {
                // url: '测试辅助文件/glTF/化工装置小/装置.gltf',
                url: '测试辅助文件/glTF/Milk/CesiumMilkTruck.gltf',
                minimumPixelSize: 128,
                maximumScale: 20000,
            },
        });

        viewer.trackedEntity = entity;//定位


        var boundingSphere = new Cesium.BoundingSphere(Cesium.Cartesian3.fromDegrees(116.3904715, 39.90571, 1), 1);

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


        ////////////////


        function createModel(url, height) {
            viewer.entities.removeAll();

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

            var entity = viewer.entities.add({
                name: url,
                position: position,
                orientation: orientation,
                model: {
                    uri: url,
                    minimumPixelSize: 128,
                    maximumScale: 20000,
                },
            });
            viewer.trackedEntity = entity;
        }

        var options = [

            {
                text: "Draco Compressed Model",
                onselect: function () {
                    createModel(
                        "../../SampleData/models/DracoCompressed/CesiumMilkTruck.gltf",
                        0
                    );
                },
            },
        ];
        createModel('测试辅助文件/glTF/Milk/CesiumMilkTruck.gltf',0);


        Sandcastle.addToolbarMenu(options);


    </script>
</body>

</html>