CesiumJS is an open-source JavaScript library for rendering geospatial data and 3D content on an interactive globe. Unlike a browser view of a model alone, it can place that model at a real-world location and show its surroundings. section 7.2.2
To place a 3D model in a CesiumJS scene:
- Choose its WGS84 latitude and longitude. CesiumJS converts those coordinates to its internal Earth-Centered, Earth-Fixed coordinates. section 7.2.2
- Prepare the model as 3D Tiles. Cesium ion can convert and host an OBJ model; Obj2Tiles is another conversion option. Tiling may offer little performance benefit for a small model, but the format streamlines integration. section 7.2.2
- Set the model’s location, height, and offset from true north with a 3D transformation matrix. The same rotation-and-translation idea used for 2D coordinates extends to three dimensions. section 7.2.2
A house in geographic context
A 3D house model is placed at coordinates in downtown Perth rather than viewed in isolation. An OpenStreetMap 3D building layer supplies surrounding context; a separate scene loads the house alongside Google photorealistic 3D tiles. section 7.2.2
Listing 7.3 Rendering and geolocating a 3D home model in CesiumJS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Digitial Twins in Action</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cesium/1.113.0/
Cesium.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/cesium/1.113.0/
Widgets/widgets.css" rel="stylesheet">
<style>
body, #cesiumContainer { margin: 0; padding: 0; overflow: hidden;
width: 100vw; height: 100vh; }
</style>
</head>
<body>
<div id="cesiumContainer"></div>
<script>
Cesium.Ion.defaultAccessToken = YOUR_ION_TOKEN_HERE; #1
const [lat, lon, height, rotation] = [
-31.961505, 115.868492, -31, -20]; #2
const matrix = () =>
Cesium.Matrix4.multiply(
Cesium.Transforms.eastNorthUpToFixedFrame(Cesium.Cartesian3.
fromDegrees(lon, lat, height)),
Cesium.Matrix4.multiply(
Cesium.Matrix4.fromScale(new Cesium.Cartesian3(
0.01, 0.01, 0.01)),
Cesium.Matrix4.fromRotation(Cesium.Matrix3.fromRotationZ(
rotation * Math.PI / 180)),
new Cesium.Matrix4()
),
new Cesium.Matrix4()
);
(async () => {
const viewer = new Cesium.Viewer("cesiumContainer", {
terrain: Cesium.Terrain.fromWorldTerrain(),
});
const [osmBuildingsTileset, customTileset] = await Promise.all([
Cesium.createOsmBuildingsAsync(), #3
Cesium.Cesium3DTileset.fromUrl("https://3d.dtia.site/tiles/
tileset.json")
]);
customTileset.modelMatrix = matrix();
viewer.scene.primitives.add(osmBuildingsTileset);
viewer.scene.primitives.add(customTileset);
viewer.scene.camera.flyTo({
destination: Cesium.Cartesian3.fromDegrees(lon, lat, 200)
});
})();
</script>
</body>
</html>
The browser listing connects a CesiumJS viewer, an ion access token, placement coordinates, and a transformation matrix to the geolocated model. section 7.2.2
The same scene can provide a low-cost VR view. Enabling the viewer’s VR button produces a split-screen view suitable for a smartphone in a cardboard-style viewer; it does not require an expensive headset. section 7.5.1
