Adapters

Adapters are small pieces of code responsible to load the panorama texture(s) in the Three.js scene.

The supported adapters are:

• equirectangular: the default adapter, used to load full or partial equirectangular panoramas
• equirectangular tiles: used to load tiled equirectangular panoramas
• equirectangular video: used to load equirectangular videos
• cubemap: used to load cubemaps projections (six textures)
• cubemap tiles: used to load tiled cubemap panoramas
• cubemap video: used to load cubemap video
• dual fisheye: used to display raw files of 360 cameras like the Ricoh Theta Z1

Import an adapter

Official adapters are available in various @photo-sphere-viewer/***-adapter packages. All adapters consist of a JavaScrpt class which must be provided to the adapter option. Some adapters will also take a configuration object provided with the static method withConfig.

Example for the Cubemap adapter:

<script type="importmap">
    {
        "imports": {
            // imports of PSV core and three
            "@photo-sphere-viewer/cubemap-adapter": "https://cdn.jsdelivr.net/npm/@photo-sphere-viewer/cubemap-adapter/index.module.js"
        }
    }
</script>

<script type="module">
    import { Viewer } from '@photo-sphere-viewer/core';
    import { CubemapAdapter } from '@photo-sphere-viewer/cubemap-adapter';

    new Viewer({
        adapter: CubemapAdapter,
        // OR
        adapter: CubemapAdapter.withConfig({
            // optional adapter config
        }),
        panorama: // specific to the adapter,
    });
</script>

TIP

When using Typescript you can also type-check the panorama object :

import { CubemapAdapter, CubemapPanorama } from '@photo-sphere-viewer/cubemap-adapter';

const viewer = new Viewer({
    adapter: CubemapAdapter,
    panorama: {
        ...,
    } satisfies CubemapPanorama,
});