<!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> 文章来源: https://blog.csdn.net/weixin_42193179/article/details/85987281