A geographic coordinate specifies a real-world location. Latitude and longitude locate a point on Earth; a height value can help position a 3D object there. Without that position, a model remains an isolated object rather than a representation aligned with its surroundings. section 7.2.2 section 7.3.1
For a 3D house placed on an interactive globe, CesiumJS converts WGS84 latitude and longitude to its Earth-Centered, Earth-Fixed coordinate system (ECEF, EPSG:4978). A transformation matrix positions the model; a separate rotation value sets its offset from true north. The coordinates answer *where* the house goes, while rotation answers *which way* it faces. section 7.2.2
Placing a house model
A CesiumJS example supplies latitude −31.961505, longitude 115.868492, height −31, and rotation −20. The house model is converted from OBJ to 3D Tiles for loading into the scene. The resulting placement can be viewed alongside a 3D building layer, making its location and orientation visible in context. 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 listing shows where the coordinate, height, and rotation values enter the CesiumJS placement code. section 7.2.2
Accurate coordinates matter beyond display. They let sensor readings, measurements, and operational data appear at their real locations. A shared spatial reference also helps align a model with GeoJSON or KML data, geological layers, utility networks, and aerial imagery. If the model is misplaced, those overlays lose their intended spatial relationship. section 7.3.1
