3D Models.html

3D模型加载与展示

最新推荐文章于 2024-10-10 08:13:09 发布

原创最新推荐文章于 2024-10-10 08:13:09 发布 · 228 阅读

0 ·

CC 4.0 BY-SA版权

cesium_demo 专栏收录该内容

41 篇文章

订阅专栏

本文介绍了一种使用glTF格式加载和展示3D模型的方法，通过Cesium库在Web环境中实现三维模型的动态加载与交互展示。文章详细解释了如何配置Cesium Viewer，包括禁用信息框和选择指示器，以及如何通过脚本动态更改模型的位置、方向和大小。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <meta name="description" content="Create 3D models using glTF.">
    <meta name="cesium-sandcastle-labels" content="Tutorials,Showcases">
    <title>3D Models</title>
    <script type="text/javascript" src="../Sandcastle-header.js"></script>
    <script type="text/javascript" src="../../../ThirdParty/requirejs-2.1.20/require.js"></script>
    <script type="text/javascript">
        if(typeof require === 'function') {
            require.config({
                baseUrl : '../../../Source',
                waitSeconds : 120
            });
        }
    </script>
</head>

<body class="sandcastle-loading" data-sandcastle-bucket="bucket-requirejs.html">
    <style>
        @import url(../templates/bucket.css);
    </style>
    <div id="cesiumContainer" class="fullSize"></div>
    <div id="loadingOverlay"><h1>Loading...</h1></div>
    <div id="toolbar"></div>
    <script id="cesium_sandcastle_script">
        function startup(Cesium) {
            'use strict';
            //Sandcastle_Begin
            let viewer = new Cesium.Viewer('cesiumContainer', {
                infoBox : false,  // 如果设置为false，则将不会创建信息框小部件。
                // 选中指示符。如果设置为false，则选择指示器小部件将不会被创建。
                selectionIndicator : false,
                shadows : true,  // 确定阴影是否由太阳投射。
                // 如果时钟在默认情况下试图提前模拟时间，则为true，否则为false。此选项优先于设置Viewer#clockViewModel。
                shouldAnimate : true
            });

            function createModel(url, height) {
                viewer.entities.removeAll();
                // Cesium.Cartesian3.fromDegrees(longitude, latitude, height, ellipsoid, result) → Cartesian3
                // longitude, latitude, 以度为单位。
                // height, 椭球面以上的高度，以米为单位。
                // 本地参考帧的中心点。
                let position = Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706, height);
                let heading = Cesium.Math.toRadians(135);
                let pitch = 0;
                let roll = 0;
                // 航向、俯仰和滚动。
                let hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);
                let orientation = Cesium.Transforms.headingPitchRollQuaternion(position, hpr);

                let entity = viewer.entities.add({
                    name : url,
                    position : position,
                    orientation : orientation,
                    model : {
                        uri : url,
                        // 指定模型的近似最小像素大小，而不考虑缩放。
                        minimumPixelSize : 128,
                        // 模型的最大规模。最小像素大小的上限。
                        maximumScale : 20000
                    }
                });
                // 获取或设置摄像机当前跟踪的实体实例。
                viewer.trackedEntity = entity;
            }

            let options = [
                {
                    text : 'Aircraft',
                    onselect : function() {
                        createModel('../../SampleData/models/CesiumAir/Cesium_Air.glb', 5000.0);
                    }
                },
                {
                    text : 'Ground Vehicle',
                    onselect : function() {
                        createModel('../../SampleData/models/GroundVehicle/GroundVehicle.glb', 0);
                    }
                },
                {
                    text : 'Hot Air Balloon',
                    onselect : function() {
                        createModel('../../SampleData/models/CesiumBalloon/CesiumBalloon.glb', 1000.0);
                    }
                },
                {
                    text : 'Milk Truck',
                    onselect : function() {
                        createModel('../../SampleData/models/CesiumMilkTruck/CesiumMilkTruck-kmc.glb', 0);
                    }
                },
                {
                    text : 'Skinned Character',
                    onselect : function() {
                        createModel('../../SampleData/models/CesiumMan/Cesium_Man.glb', 0);
                    }
                },
                {
                    text : 'Draco Compressed Model',
                    onselect : function() {
                        createModel('../../SampleData/models/DracoCompressed/CesiumMilkTruck.gltf', 0);
                    }
                }
            ];

            Sandcastle.addToolbarMenu(options);
            //Sandcastle_End
            Sandcastle.finishedLoading();
        }

        if (typeof Cesium !== 'undefined') {
            startup(Cesium);
        } else if (typeof require === 'function') {
            require(['Cesium'], startup);
        }
    </script>
</body>

</html>