How mistic100/photo-sphere-viewer works
Photo Sphere Viewer is a JavaScript library for displaying 360° panoramas. A user creates a Viewer, which loads panorama data through a chosen adapter and renders it; input handling and viewer services support navigation and presentation. Separate packages add tiled and video formats, annotations, maps, tours, and interactive controls. The tree and source index establish these package boundaries and selected dependencies, but most runtime wiring was not sampled, so uncertain connections are omitted.
Main entry points: Viewer.ts Viewer · AutorotatePlugin.ts Auto Rotation · MarkersPlugin.ts Markers · CubemapTilesAdapter.ts Cubemap Tiles
Components 25
Viewer Core
- Viewer
packages/core/src/Viewer.ts - Input Handling
packages/core/src/services/EventsHandler.ts - Rendering
packages/core/src/services/Renderer.ts - Texture Loading
packages/core/src/services/TextureLoader.ts - Adapter Base
packages/core/src/adapters/AbstractAdapter.ts - Press Handling
packages/core/src/utils/PressHandler.ts
Panorama Adapters
- Equirectangular
packages/core/src/adapters/EquirectangularAdapter.ts - Cubemap
packages/cubemap-adapter/src/CubemapAdapter.ts - Dual Fisheye
packages/dual-fisheye-adapter/src/DualFisheyeAdapter.ts - Equirectangular Tiles
packages/equirectangular-tiles-adapter/src/EquirectangularTilesAdapter.ts - Cubemap Tiles
packages/cubemap-tiles-adapter/src/CubemapTilesAdapter.ts - Tile Queue
packages/shared/Queue.ts
Navigation Extensions
- Markers
packages/markers-plugin/src/MarkersPlugin.ts - Map View
packages/map-plugin/src/components/MapComponent.ts - Virtual Tour
packages/virtual-tour-plugin/src/VirtualTourPlugin.ts - Auto Rotation
packages/autorotate-plugin/src/AutorotatePlugin.ts
Presentation Extensions
- Video Playback
packages/video-plugin/src/VideoPlugin.ts - Panorama Gallery
packages/gallery-plugin/src/GalleryComponent.ts - Plan View
packages/plan-plugin/src/PlanPlugin.ts - Settings
packages/settings-plugin/src/SettingsPlugin.ts - Panorama Overlays
packages/overlays-plugin/src/OverlaysPlugin.ts - Resolution Control
packages/resolution-plugin/src/ResolutionPlugin.ts - Gyroscope
packages/gyroscope-plugin/src/GyroscopePlugin.ts - Stereo View
packages/stereo-plugin/src/StereoPlugin.ts
Other components
- Application User
Connections 15
- Application User → Viewer: creates and loads
README.md - Viewer → Rendering: initializes
packages/core/src/Viewer.ts - Viewer → Texture Loading: initializes
packages/core/src/Viewer.ts - Viewer → Input Handling: initializes
packages/core/src/Viewer.ts - Viewer → Adapter Base: uses adapter
packages/core/src/Viewer.ts - Input Handling → Press Handling: uses
packages/core/src/services/EventsHandler.ts - Cubemap Tiles → Cubemap: uses
packages/cubemap-tiles-adapter/src/CubemapTilesAdapter.ts - Equirectangular Tiles → Tile Queue: queues tile loads
packages/equirectangular-tiles-adapter/src/EquirectangularTilesAdapter.ts - Cubemap Tiles → Tile Queue: queues tile loads
packages/cubemap-tiles-adapter/src/CubemapTilesAdapter.ts - Auto Rotation → Markers: uses markers
packages/autorotate-plugin/src/AutorotatePlugin.ts - Auto Rotation → Video Playback: uses video
packages/autorotate-plugin/src/AutorotatePlugin.ts - Map View → Markers: navigates to marker
packages/map-plugin/src/components/MapComponent.ts - Map View → Panorama Gallery: uses gallery types
packages/map-plugin/src/components/MapComponent.ts - Plan View → Markers: uses markers
packages/plan-plugin/src/PlanPlugin.ts - Video Playback → Auto Rotation: requires for keypoints
packages/video-plugin/src/VideoPlugin.ts