photo-sphere-viewer简单应用

官网链接：Photo Sphere Viewer
参考链接：Getting Started | Photo Sphere Viewer

1.安装

npm install @photo-sphere-viewer/core

2 引入

import { Viewer } from "@photo-sphere-viewer/core";
import "@photo-sphere-viewer/core/index.css";// 注意，一定要引入css

3.完整代码

<!-- 组件说明 -->
<template>
  <div id="pano"></div>
</template>

<script setup>
import { onMounted, ref, watch } from "vue";
import { Viewer } from "@photo-sphere-viewer/core";
import "@photo-sphere-viewer/core/index.css";// 注意，一定要引入css
// import demo1 from "./demo1.jpg";
import demo1 from "./demo2.jpg";
onMounted(() => {
  const viewer = new Viewer({
    container: document.querySelector("#pano"),
    panorama: demo1,
  });
});
</script>

<style lang="scss" src="">
#pano {
  width: 100%;
  height: calc(100vh - 120px);
}
</style>

4.效果：