I am developing a site to consume 3D Tiles of PNTS (Point Cloud Tiles) with Cesium. Here is the code.
<html> <head> <meta charset="UTF-8"> <script src="https://cesium.com/downloads/cesiumjs/releases/1.102/Build/Cesium/Cesium.js"></script> <script src="https://frogcat.github.io/cesium-hash/cesium-hash.js"></script> <link href="https://cesium.com/downloads/cesiumjs/releases/1.102/Build/Cesium/Widgets/widgets.css" rel="stylesheet"></link> <style> #cesiumContainer { position: absolute; top: 0; left: 0; height: 100%; width: 100%; margin: 0; overflow: hidden; padding: 0; font-family: sans-serif; } html { height: 100%; } body { padding: 0; margin: 0; overflow: hidden; height: 100%; } </style> </head> <body> <div id="cesiumContainer"></div> <script> Cesium.Ion.defaultAccessToken = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI5N2UyMjcwOS00MDY1LTQxYjEtYjZjMy00YTU0ZTg5MmViYWQiLCJpZCI6ODAzMDYsImlhdCI6MTY0Mjc0ODI2MX0.dkwAL1CcljUV7NA7fDbhXXnmyZQU_c-G5zRx8PtEcxE" const viewer = new Cesium.Viewer("cesiumContainer", { animation: false, homeButton: false, navigationHelpButton: false, sceneModePicker: false, timeline: false }) viewer.scene.imageryLayers.addImageryProvider(imageProvider) viewer.clock.currentTime = Cesium.JulianDate.fromIso8601("2023-03-21T12:00") viewer.scene.globe.depthTestAgainstTerrain = true const searchParams = new URLSearchParams(window.location.search) let url = searchParams.get('tileset') || 'https://d21pj9gigeop84.cloudfront.net/data/point-cloud/lp-2022/22302_kawazu-cho/tileset.json' const tileset = new Cesium.Cesium3DTileset({ url: url, }) tileset.maximumScreenSpaceError = 16 tileset.style = new Cesium.Cesium3DTileStyle({pointSize: 3}); tileset.pointCloudShading.attenuation = false tileset.pointCloudShading.geometricErrorScale = 1 viewer.scene.primitives.add(tileset) viewer.camera.moveEnd.addEventListener(() => { location.hash = Cesium.Hash.encode(viewer) }) const credit = new Cesium.Credit('Virtual Shizuoka and/or 東京都デジタルツイン実現プロジェクト') viewer.scene.frameState.creditDisplay.addDefaultCredit(credit) if (Cesium.Hash.decode(location.hash) == null) { tileset.readyPromise.then(function () { viewer.zoomTo( tileset, new Cesium.HeadingPitchRange( 0.0, -0.5, tileset.boundingSphere.radius / 4) ) location.hash = Cesium.Hash.encode(viewer) }) } else { Cesium.Hash(viewer) } </script> </body> </html> 
Top comments (0)