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)