前端JS用PhotoSphereViewer插件实现全景3D功能demo

本文链接：https://blog.csdn.net/weixin_50367873/article/details/129669919

demo

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <!-- for optimal display on high DPI devices -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/@photo-sphere-viewer/core/index.min.css"
    />
  </head>

  <script src="https://cdn.jsdelivr.net/npm/three/build/three.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@photo-sphere-viewer/core/index.min.js"></script>

  <!-- the viewer container must have a defined size -->
  <div id="viewer" style="width: 100vw; height: 100vh"></div>

  <script>
    const viewer = new PhotoSphereViewer.Viewer({
      container: document.querySelector("#viewer"),
      panorama:
        "https://photo-sphere-viewer-data.netlify.app/assets/sphere.jpg",
    });
  </script>
</html>

官方文档
vue使用方法
npm install photo-sphere-viewer --save

import { MarkersPlugin } from 'photo-sphere-viewer/dist/plugins/markers'
import 'photo-sphere-viewer/dist/plugins/markers.css'

this.viewer = new Viewer({
    container:document.querySelector('#viewer'),
    panorama:'https://aupup-mall-pub.oss-cn-shenzhen.aliyuncs.com/public/aa28925e-8ef9-4a2d-9217-e82a86b6ee15.jpg',
    size:{
        width: '100%',
        height: '100%',
    },
    plugins: [
        [MarkersPlugin, {
            markers: [
                {
                    id:'circle',
                    tooltip:'A circle of radius 30',
                    circle:30,
                    svgStyle : {
                        fill:'rgba(255,255,0,0.3)',
                        stroke:'yellow',
                        strokeWidth:'2px',
                    },
                    longitude: -1.5,
                    latitude: -0.28,
                    anchor: 'center right',
                }
            ],
        }],
    ],
});