Vueで360°画像をモーダル表示する【Photo Sphere Viewer活用】

Vue + Vuetify + Photo Sphere Viewer を使って、360°画像をモーダルダイアログで表示する方法を紹介
https://photo-sphere-viewer.js.org/

1. 必要なライブラリのインストール

npm install @photo-sphere-viewer/core
npm install @mdi/js

2. モーダル（ダイアログ）部分のテンプレート

<v-btn color="primary" @click="open360Dialog">360°画像を見る</v-btn>

<!-- 360°画像用ダイアログ -->
<v-dialog v-model="show360Dialog" max-width="75vw" max-height="90vh">
  <v-card>
    <v-card-title style="display: flex; align-items: center">
      <span>360°画像ビューアー</span>
      <v-spacer></v-spacer>
      <v-btn :icon="mdiClose" color="primary" @click="close360Dialog"></v-btn>
    </v-card-title>
    <v-card-text>
      <div
        v-if="show360Dialog"
        id="viewer-360-image-container"
        style="width: 70vw; height: 70vh"
      ></div>
    </v-card-text>
  </v-card>
</v-dialog>

3. スクリプト部分（Photo Sphere Viewerの呼び出し

import { Viewer } from '@photo-sphere-viewer/core'
import '@photo-sphere-viewer/core/index.css'
import { mdiClose } from '@mdi/js'

export default {
  data() {
    return {
      show360Dialog: false,
      viewer360Image: null,
      mdiClose,
    }
  },
  methods: {
    async open360Dialog() {
      this.show360Dialog = true
      // 画像URLを取得（例: propsやdataから）
      const imageUrl = this.selectedItem.image360OriginKey

      this.$nextTick(() => {
        const viewerContainer = document.getElementById('viewer-360-image-container')
        if (!viewerContainer) return

        if (this.viewer360Image) {
          this.viewer360Image.destroy()
        }
        this.viewer360Image = new Viewer({
          container: viewerContainer,
          panorama: imageUrl,
          defaultPitch: '0deg',
          defaultYaw: '0deg',
          defaultZoomLvl: 0,
          navbar: ['zoom', 'move', 'fullscreen'],
          panoData: {
            poseHeading: 0,
            posePitch: 0,
            poseRoll: 0,
          },
        })
      })
    },
    close360Dialog() {
      this.show360Dialog = false
      if (this.viewer360Image) {
        this.viewer360Image.destroy()
        this.viewer360Image = null
      }
    },
  },
}

4. ポイント

• panoDataでpose系を0にすることで、EXIFの向き補正を無効化できる
  0にしない場合はXMPメタデータに含まれるposeHeading,posePitch,poseRollといった値から画像が回転した状態を基準に表示される
• モーダルを閉じるときはdestroy()でインスタンスを破棄する

5. 表示

• モーダルで画像を選択
  

• モーダルで360°画像を表示
  

6. まとめ

photo-sphere-viewerを使うことで素早く360°画像の表示を行うことができました。
向きを調節する際はpose系を0にして無効にするのが分からず、苦戦しましたが解決して良かったです。