How to consume 3D Tiles (pnts) with Cesium

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>

Blog

How to consume 3D Tiles (pnts) with Cesium

Hidenori FUJIMURA

See Also

Join Our Newsletter. No Spam, Only the good stuff.

Related