[Support]: All photospheres are destroyed on destroy() call

[felixoros]

What are you trying to do?

Hi I'm using the react photosphere multiple times on the same page, i have a main photosphere that it's visible all of the time and some other photoshpere containers visible on expanded table rows in an overlay. If i create to many rows in table with photosphere elements > 8 the browser just crash. I have tried to use the destroy() method in order to free the memory on table row unexpanding method - so my table will display only one photosphere on the row at the time, and then in total will be rendered only 2 photospheres on the same page. But the problem which i encounter is that the destroy() method is killing also the main photosphere which should be visible all of the time.

I will attach a snippet with the code that it's called before toggling the expanding of the rows in the table and where the destroy method it's called.

How can i perform the cleanup of tree.js photoshpere only on the specific element without destroying all other instances of photosphere views?

Code

                onExpandedClick: (index: number) => { 
                    if (scene.isExpanded) {
                        const currentRef = ((scenesRef.current[i]) as any).current as any;
                        currentRef.destroy();
                    }
                    toggleFlagInSceneState(index, "isExpanded");
                },

Sandbox Link

No response

Library Version

3.4.0-psv5.4.0

What operating system are you using?

macOS

What browser are you using?

Firefox

Logs

No response

[Elius94]

Hey! can you please make a sandbox in order to help me? Thanks

[felixoros]

Sure, bellow is the sandbox link. try to click on the "Close Overlay" button and you will see that both references views will be destroyed not only the second one, how can i destroy only the second view leaving the first one as it is?

https://codesandbox.io/p/sandbox/happy-wiles-cw7yw8?file=%2Fsrc%2FApp.js%3A7%2C30

[Elius94]

I'm working on it! :)

[Elius94]

Hey! The trouble is that if you kill one of the psv, you also destroy the main Three.js instance that is only one. In your case you better use a conditional rendering in React, like this:

import "./styles.css";
import { ReactPhotoSphereViewer } from "react-photo-sphere-viewer";
import { useState, useRef } from "react";
import { Overlay } from "./Overlay";

export default function App() {
  const pSRef = useRef(0);
  const secondPsRef = useRef(1);

  const [isOverlayOpen, setIsOverlayOpen] = useState(true);

  const closeOverlay = () => {
    // secondPsRef.current.destroy();
    setIsOverlayOpen(!isOverlayOpen);
  };

  return (
    <div className="App">
      <ReactPhotoSphereViewer
        ref={pSRef}
        src="Test_Pano.jpg"
        height={"100vh"}
        width={"100%"}
        littlePlanet={false}
      />
      (isOverlayOpen && (
      <Overlay
        ref={secondPsRef}
        isOverlayOpen={isOverlayOpen}
        closeOverlay={closeOverlay}
      />
      ))
    </div>
  );
}