Simpler way to include an image

[neuhaus]

I don't like having to have two javascript blocks just to include a default 360° viewer for a fullscreen image.
I use esm.sh here instead of jsdelivr. It automatically resolves the "three" dependency, eliminating the need for an import map! I also wanted a custom element for the viewer itself.
So now I have this generic file viewer-component.js:

import { Viewer } from 'https://esm.sh/@photo-sphere-viewer/core@5.14.3';

class PhotoSphereElement extends HTMLElement {
    connectedCallback() {
        const panorama = this.getAttribute('src'); // Read the panorama URL from the custom "src" attribute

        // Initialize the viewer inside this custom element
        this.viewer = new Viewer({
            container: this,
            panorama: panorama,
        });
    }

    disconnectedCallback() {
        if (this.viewer) { this.viewer.destroy(); }
    }
}

// Register the custom tag with the browser
customElements.define('photo-sphere', PhotoSphereElement);

And then a minimalistic index.html with a new custom element:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>360 Viewer</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@photo-sphere-viewer/core@5.14.3/index.min.css" />
    <script type="module" src="./viewer-component.js"></script>
    <style>
        photo-sphere { display: block; width: 100vw; height: 100vh; }
        body { margin: 0; }
    </style>
</head>
<body>
    <photo-sphere src="/pano.jpg"></photo-sphere>
</body>
</html>

Perhaps it's useful for someone...

[mistic100]

Why do you need two JS blocks exactly ? Every demo has a single one.

Be aware that if you start using plugins, esm.sh will break apart and load multiple copies of three. Same thing on esm.run (jsdelivr variant of this feature).

---

It is a good idea to create a Web Component for your need, however I will not provide an official one because there are just too much options, methods and events, let alone the plugins.