Elius94 / react-photo-sphere-viewer

Photosphere Viewer for React.JS
MIT License
65 stars 21 forks source link

[Support]: How to implement the VirtualTourPlugin correctly? #31

Closed martenjurgens closed 1 year ago

martenjurgens commented 1 year ago

What are you trying to do?

Hello,

I'm trying to use the VirtualTourPlugin, but I can't get the navigation working.

As you can see in the sandbox, the navigation arrows/markers appear but it doesn't navigate to the next node/panorama.

Code

import dynamic from "next/dynamic";
import Head from "next/head";
import { createRef } from "react";
import {
  GalleryPlugin,
  MarkersPlugin,
  VirtualTourPlugin,
} from "react-photo-sphere-viewer/dist/index";

const ReactPhotoSphereViewer = dynamic(
  () =>
    import("react-photo-sphere-viewer").then(
      (mod) => mod.ReactPhotoSphereViewer
    ),
  {
    ssr: false,
  }
);

export default function Home() {
  const pSRef = createRef();

  const plugins = [
    [
      VirtualTourPlugin,
      {
        nodes: [
          {
            id: "node-2",
            panorama: "test.jpg",
            name: "tahe1",
            links: [
              {
                nodeId: "node-2",
                position: { textureX: 1500, textureY: 780 },
              },
            ],
          },
          {
            id: "node-3",
            panorama: "test.jpg",
            name: "tahe2",
            links: [
              {
                nodeId: "node-2",
                position: { textureX: 1500, textureY: 1000 },
              },
            ],
          },
        ],
      },
    ],
    [
      GalleryPlugin,
      {
        thumbnailSize: { width: 100, height: 100 },
      },
    ],
  ];

  return (
    <>
      <Head>
        <title>Virtual tour</title>
        <meta name="description" content="Generated by create next app" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <ReactPhotoSphereViewer
        ref={pSRef}
        src="test.jpg"
        height={"100vh"}
        width={"100%"}
        plugins={plugins as any}
        container="main"
      ></ReactPhotoSphereViewer>
    </>
  );
}

Sandbox Link

https://codesandbox.io/p/sandbox/stupefied-bartik-yun73x

Library Version

latest

What operating system are you using?

Windows

What browser are you using?

None

Logs

No response