Loading...
Loading...
Use when building multi-stop flyover presentations, virtual tours, guided location showcases, or cinematic sequences on the CesiumJS 3D globe
npx skill4agent add cesiumgs/cesium-ai-integrations creating-globe-toursflowchart TB
A[Gather stop list] --> B[Resolve coordinates]
B -->|geolocation_search if needed| C[For each stop]
C --> D[Add label at marker position<br/>entity_add_label]
D --> E[Calculate viewpoint<br/>offset from marker]
E --> F[Fly to VIEWPOINT<br/>camera_fly_to]
F --> G[Orbit?<br/>camera_start_orbit]
G --> H[Wait/delay]
H --> I{More stops?}
I -->|yes| C
I -->|no| J[End tour]| Marker Type | Camera Offset Strategy |
|---|---|
| City/landmark | Place camera 0.01–0.05° away in lat/lon, 500–2000m altitude, pitch down 20–40° toward marker |
| Region/area | Place camera 0.1–0.5° away, 5000–20000m altitude, pitch down 30–50° |
| Building/POI | Place camera 0.005–0.01° away, 200–800m altitude, pitch down 25–45° |
Marker position: { longitude: 2.2945, latitude: 48.8584, height: 350 }
Camera viewpoint: { longitude: 2.2945, latitude: 48.845, height: 1200 }
^^^^^^ offset south
Camera orientation: { heading: 0, pitch: -35, roll: 0 }
^^^^^^^^^^ looking down toward marker{
"longitude": -74.0060,
"latitude": 40.7128,
"height": 1000
}{
"red": 1.0,
"green": 0.0,
"blue": 0.0,
"alpha": 1.0
}| Effect | Easing | Use For |
|---|---|---|
| Smooth professional | QUADRATIC_IN_OUT | Most tours |
| Dramatic arrival | CUBIC_IN | Hero locations |
| Gentle float | SINUSOIDAL_OUT | Scenic views |
| Quick snap | LINEAR_NONE | Fast transitions |
| Distance | Duration |
|---|---|
| Same city | 2-3 seconds |
| Regional (100km) | 4-5 seconds |
| Continental | 6-8 seconds |
| Global | 10+ seconds |
| Effect | Speed (rad/s) | Direction |
|---|---|---|
| Slow dramatic | 0.002 | counterclockwise |
| Standard showcase | 0.005 | counterclockwise |
| Quick spin | 0.01 | clockwise |
camera_start_orbitcamera_look_at_transformcamera_start_orbitcamera_look_at_transformcamera_start_orbit// 1. Search for location (returns coordinates)
geolocation_search({ query: "Eiffel Tower, Paris" })
// Returns: { longitude: 2.2945, latitude: 48.8584, ... }
// 2. Add label at the ACTUAL location
entity_add_label({
position: { longitude: 2.2945, latitude: 48.8584, height: 350 },
label: {
text: "Eiffel Tower",
font: "24pt sans-serif",
fillColor: { red: 1, green: 1, blue: 1, alpha: 1 },
outlineColor: { red: 0, green: 0, blue: 0, alpha: 1 },
outlineWidth: 2,
style: "FILL_AND_OUTLINE"
},
id: "tour-label-paris"
})
// 3. Fly camera to a VIEWPOINT — NOT to the marker itself!
// Camera is offset south of the marker and elevated, looking
// north and downward so the Eiffel Tower label is clearly visible.
camera_fly_to({
destination: { longitude: 2.2945, latitude: 48.845, height: 1200 },
orientation: { heading: 0, pitch: -35, roll: 0 },
duration: 5,
easingFunction: "QUADRATIC_IN_OUT"
})
// 4. Start orbit (after fly_to completes)
camera_start_orbit({
speed: 0.005,
direction: "counterclockwise"
})
// 5. Wait, then stop orbit
camera_stop_orbit()
// 6. Continue to next stop...
// 7. Cleanup when done
entity_remove({ entityId: "tour-label-paris" })| Mistake | Fix |
|---|---|
| Camera flies to marker coords | Offset the camera so the marker is IN VIEW, not under the camera. See Viewpoint Positioning above. |
Using | Just call |
| Coordinates reversed | Use longitude first: |
| Colors as hex strings | Use object: |
| Flying too fast | Increase duration for long distances |
| Orbit won't stop | Call camera_stop_orbit() explicitly |
| Labels not visible | Check height is above terrain, increase font size |
| Forgetting cleanup | Track entity IDs and call entity_remove |
| Server | Role in Tours |
|---|---|
| Camera | fly_to, start_orbit, stop_orbit, set_view |
| Entity | add_label, add_billboard, add_point, remove |
| Clock | Set time-of-day for lighting effects |
| Geolocation | search to resolve place names |
camera_look_at_transformcamera_start_orbit