photo-sphere-viewer.js 全景图Vr 720全景原生使用js_photo-sphere-viewer.min.js-优快云博客

使用教程

插件官网添加链接描述（其实使用自行查看）
index.html

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vr全景</title>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/@photo-sphere-viewer/core/index.min.css"
    />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/@photo-sphere-viewer/markers-plugin/index.min.css"
    />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/@photo-sphere-viewer/virtual-tour-plugin/index.min.css"
    />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/@photo-sphere-viewer/gallery-plugin/index.min.css"
    />
    <style></style>
</head>
 
<body>
    <div id="viewer" style="width: 100%; height: 100%;"></div>
</body>
 
</html>
<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>
<script src="https://cdn.jsdelivr.net/npm/@photo-sphere-viewer/markers-plugin/index.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@photo-sphere-viewer/autorotate-plugin/index.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@photo-sphere-viewer/virtual-tour-plugin/index.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/@photo-sphere-viewer/gallery-plugin/index.min.js">
</script>
<script>
//动画参数
const animatedValues = {
  pitch: {
    start: -Math.PI / 2,
    end: 0.2,
  },
  yaw: {
    start: Math.PI,
    end: 0,
  },
  zoom: {
    start: 0,
    end: 50,
  },
  fisheye: {
    start: 2,
    end: 0,
  },
};
var currIndex = 0;
//初始化实例
const viewer = new PhotoSphereViewer.Viewer({
  container: "viewer",
  panorama: "http://szgctest.shengtucuican.cn/image/DSC00169.jpg",
  navbar: ["gallery"],
  plugins: [
    [
      PhotoSphereViewer.GalleryPlugin,
      {
        visibleOnLoad: true,
      },
    ],
    [
      PhotoSphereViewer.VirtualTourPlugin,
      {
        positionMode: "gps",
        renderMode: "3d",
        arrowStyle: {
          color: "#999",
          hoverColor: "#666",
          outlineColor: "#ccc",
          scale: [0.2, 0.6],
        },
      },
    ],
    [
      PhotoSphereViewer.GalleryPlugin,
      {
        /*图库*/
        visibleOnLoad: true,
        hideOnClick: true,
      },
    ],
  ],
});

var gallery = viewer.getPlugin(PhotoSphereViewer.GalleryPlugin);
gallery.setItems([
  {
    id: "1",
    panorama: "http://szgctest.shengtucuican.cn/image/DSC00169.jpg",
    thumbnail: "http://szgctest.shengtucuican.cn/image/DSC00169.jpg",
  },
  {
    id: "2",
    panorama: "http://szgctest.shengtucuican.cn/image/DSC00115.jpg",
    thumbnail: "http://szgctest.shengtucuican.cn/image/DSC00115.jpg",
  },
]);

var virtualTour = viewer.getPlugin(PhotoSphereViewer.VirtualTourPlugin);

var markerLighthouse = {
  id: "1",
  image: "http://szgctest.shengtucuican.cn/image/DSC00169.jpg",

  size: { width: 32, height: 32 },
  anchor: "bottom bottom",
  gps: [100.155973, 1115.666601, -1],
};
virtualTour.setNodes(
  [
    {
      id: "1",
      panorama: "http://szgctest.shengtucuican.cn/image/DSC00169.jpg",
      thumbnail: "http://szgctest.shengtucuican.cn/image/DSC00169.jpg",
      name: "大门",
      links: [{ nodeId: "2" }],
      markers: [markerLighthouse],
      gps: [100, 0, 2],
      panoData: { poseHeading: 0 },
      map: { x: 1920, y: 1250, color: "red" },
    },
    {
      id: "2",
      panorama: "http://szgctest.shengtucuican.cn/image/DSC00115.jpg",
      thumbnail: "http://szgctest.shengtucuican.cn/image/DSC00115.jpg",
      name: "会议室",
      links: [{ nodeId: "1" }],
      markers: [markerLighthouse],
      gps: [100, 0, 2],
      panoData: { poseHeading: 0 },
      map: { x: 1920, y: 1250, color: "red" },
    },
  ],
  "1"
);

function onloadFunction() {
  // autorotate.stop();
  new PhotoSphereViewer.utils.Animation({
    properties: animatedValues,
    duration: 2500,
    easing: "inOutQuad",
    onTick: (properties) => {
      viewer.setOption("fisheye", properties.fisheye);
      viewer.rotate({
        yaw: properties.yaw,
        pitch: properties.pitch,
      });
      viewer.zoom(properties.zoom);
    },
  }).then(() => {
    autorotate.start();
  });
}
</script>