3D Tiles做爲傳輸和渲染大規模3D地理空間數據的格式,應對的都是大規模數據的場景,Cesium提供了一個監視3D Tiles數據的監視器,能夠經過這個監視器觀察3D Tiles數據的效果。css
HTML頁面3DTilesInspector.html代碼以下:html
<!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="Use the 3D Tiles inspector as a debugging tool for different tilesets."> <meta name="cesium-sandcastle-labels" content="Beginner, Tutorials, Showcases"> <title>Cesium Demo</title> <script type="text/javascript" src="../Build/Cesium/Cesium.js"></script> <style> @import url(../Build/Cesium/Widgets/widgets.css); html, body { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; font-family: sans-serif; background: #000; } .fullSize { display: block; position: absolute; top: 0; left: 0; border: none; width: 100%; height: 100%; } </style> </head> <body> <div id="cesiumContainer" class="fullSize"></div> <script src="3DTilesInspector.js"></script> </body> </html>
主要的javascript代碼3DTilesInspector.js以下:java
'use strict'; var viewer = new Cesium.Viewer('cesiumContainer', { terrainProvider: Cesium.createWorldTerrain() }); viewer.scene.globe.depthTestAgainstTerrain = true; viewer.extend(Cesium.viewerCesium3DTilesInspectorMixin); var inspectorViewModel = viewer.cesium3DTilesInspector.viewModel; var tileset = new Cesium.Cesium3DTileset({ url: "../dayanta/tileset.json" }); viewer.scene.primitives.add(tileset); tileset.readyPromise.then(function () { viewer.zoomTo(tileset); });
能夠看到添加3DTiles監視器的代碼比較簡單,將Cesium.viewerCesium3DTilesInspectorMixin對象傳入拓展函數viewer.extend()便可。最終顯示的效果以下:json
能夠看到右邊出現了一個3D Tiles Inspector窗體,裏面包含了與3D Tiles格式相關的狀態參數:ide
其中勾選Performance,就能夠顯示當前的具體幀數;Screen Space Error也是個很重要的參數,決定了當前模型細分的層級。參數設置的越小,細分的層度就會越高,相應的也會耗費更多的性能。函數