[Support]: How to use EquirectangularTilesAdapter

ziakor commented 1 year ago

What are you trying to do?

Hi, i want to use EquirectangularTilesAdapter with react-photo-sphere-viewer. i've tried to follow the example in js : https://codesandbox.io/s/srpidc But when i try in react, its doesn't work and show me an error. can you help me to understand what is wrong in my react version ?

Code

No response

Sandbox Link

JS Example : https://codesandbox.io/s/srpidc React version not working: https://codesandbox.io/s/friendly-alex-w1t43m?file=/src/App.js

Library Version

latest

What operating system are you using?

Windows

What browser are you using?

None

Logs

PSVError
An undefined value was given for adapter.

Elius94 commented 1 year ago

Hello Dimitri, thank you for the issue! First of all, at the moment, you can't use Plugins and Adapter imported from external source (import { Plugin } from "@photo-sphere-viewer/Plugin"), it won't work because of a wrong referencing of the main library. Both The react wrapper and the plugin must refer to the same code but in this case it points to two different sources. Since I'll find how to fix that, I've exported all the official plugins and adapter in the React Wrapper library, and so, in your case you should use this import:

import { ReactPhotoSphereViewer, EquirectangularTilesAdapter } from "react-photo-sphere-viewer";

Let me know if it works Thanks

Elius94 commented 1 year ago

So, I've figured out that there was some mistakes in your code: in the props: panorama -> src you don't have to set the "viewer" prop.

https://codesandbox.io/s/twilight-sun-py011i?file=/src/App.js

This is working 😀

import "./styles.css";
import {
  ReactPhotoSphereViewer,
  EquirectangularTilesAdapter
} from "react-photo-sphere-viewer";
//import { EquirectangularTilesAdapter } from "@photo-sphere-viewer/equirectangular-tiles-adapter";

export default function App() {
  const baseUrl = "https://photo-sphere-viewer-data.netlify.app/assets/";
  return (
    <div className="App">
      <ReactPhotoSphereViewer
        height={"100vh"}
        width={"100%"}
        keyboard={false}
        adapter={EquirectangularTilesAdapter}
        src={{
          width: 6656,
          cols: 16,
          rows: 8,
          baseUrl: `${baseUrl}sphere-small.jpg`,
          tileUrl: (col, row) => {
            const num = row * 16 + col + 1;
            return `${baseUrl}sphere-tiles/image_part_${("000" + num).slice(
              -3
            )}.jpg`;
          }
        }}
        caption="Parc national du Mercantour <b>&copy; Damien Sorel</b>"
        loadingImg={`${baseUrl}'loader.gif`}
        touchmoveTwoFingers
        mousewheelCtrlKey
      />
    </div>
  );
}

ziakor commented 1 year ago

Oh 😅😅 Thank you for your help. Every adapter are compatible with virtual Tour plugins or there are some limitation? Sorry if the question is obvious

Elius94 commented 1 year ago

No problem, thank you for asking! For the rest, please refer to the original library, where you will find all the information about it :D

Elius94 / react-photo-sphere-viewer