npm install @photo-sphere-viewer/core @photo-sphere-viewer/equirectangular-adapter @photo-sphere-viewer/markers-plugin three

import { Version } from '@microsoft/sp-core-library';
import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';
import { SPComponentLoader } from '@microsoft/sp-loader';

import { Viewer } from '@photo-sphere-viewer/core';
import { EquirectangularAdapter } from '@photo-sphere-viewer/equirectangular-adapter';
import { MarkersPlugin } from '@photo-sphere-viewer/markers-plugin';

export interface I360ViewerWebPartProps {
  imageUrl: string;
}

export default class Viewer360WebPart extends BaseClientSideWebPart<I360ViewerWebPartProps> {
  private viewer: Viewer | undefined;

  public render(): void {
    this.domElement.innerHTML = `
      <div id="psv-container" style="width:100%;height:500px;"></div>
    `;

    const container = this.domElement.querySelector('#psv-container') as HTMLElement;

    this.viewer = new Viewer({
      container,
      adapter: EquirectangularAdapter,
      panorama: this.properties.imageUrl || 
                'https://example.com/pano-sample.jpg',
      navbar: ['zoom', 'fullscreen'],
      plugins: [
        [MarkersPlugin, {
          markers: [
            {
              id: 'marker-1',
              position: { yaw: '45deg', pitch: '10deg' },
              image: 'https://cdn-icons-png.flaticon.com/512/25/25694.png',
              size: { width: 32, height: 32 },
              tooltip: 'Machine 01'
            }
          ]
        }]
      ]
    });
  }

  protected onDispose(): void {
    if (this.viewer) {
      this.viewer.destroy();
      this.viewer = undefined;
    }
  }

  protected get dataVersion(): Version {
    return Version.parse('1.0');
  }
}