How to setup the camera fly to the target

Fig1. Taipei 3D building with world terrain.

Using CesiumJS, you can build your own 3D map app. This javascript code demos how to use the camera object to fly to the 屏風山 and 台北 to show the 3D terrain and 3d building map.

Fig. 2. 從南港山遠看台北 101.

Code

<html>

<head>

</head>

<body>

Cesium.Ion.defaultAccessToken = "TOKEN"

const viewer = new Cesium.Viewer('cesiumContainer', {

terrainProvider: Cesium.createWorldTerrain()

});

// Add Cesium OSM Buildings.

const osmBuildings = viewer.scene.primitives.add(Cesium.createOsmBuildings());

// Fly the camera to San Francisco using longitude, latitude, and height.

viewer.camera.flyTo({

// 24.180244°N 121.310877°E // 屏風山新登山口

destination: Cesium.Cartesian3.fromDegrees(121.310877, 24.180244, 4000)

});

</script>

</body>

</html>

Run

gio open index.html

Fig. 3. 屏風山登山口附近 3D 地形圖.

Fig. 4. 大禹嶺附近 3D 地形圖.

井民全觀點 (Jing's Perspective)

2021年5月13日星期四

[cesiumjs, camera] How to setup the camera fly to the target

Code

Run

References

2021年5月13日 星期四

[cesiumjs, camera] How to setup the camera fly to the target

Code

Run

References

2021年5月13日星期四