Add support for 360-degree images

package.json

@@ -24,12 +24,14 @@
     "@docusaurus/preset-classic": "3.5.2",
     "@docusaurus/theme-mermaid": "3.5.2",
     "@mdx-js/react": "^3.0.0",
+    "@photo-sphere-viewer/core": "^5.10.0",
     "clsx": "^2.0.0",
     "docusaurus-plugin-image-zoom": "^0.1.4",
     "docusaurus-theme-github-codeblock": "^2.0.2",
     "prism-react-renderer": "^2.3.0",
     "react": "^18.0.0",
-    "react-dom": "^18.0.0"
+    "react-dom": "^18.0.0",
+    "three": "^0.168.0"
   },
   "devDependencies": {
     "@docusaurus/module-type-aliases": "3.5.2",

src/components/Image360Viewer.js

@@ -0,0 +1,25 @@
+import React, { useEffect, useRef } from 'react';
+import { Viewer } from '@photo-sphere-viewer/core';
+import '@photo-sphere-viewer/core/index.css'; // Import the CSS
+
+const Image360Viewer = ({ imageUrl }) => {
+  const viewerRef = useRef(null);
+
+  useEffect(() => {
+    const viewer = new Viewer({
+      container: viewerRef.current,
+      panorama: imageUrl,
+      navbar: true,  // Optional: shows the navigation bar
+      defaultLat: 0, // Optional: initial vertical angle
+      defaultLong: 0, // Optional: initial horizontal angle
+    });
+
+    return () => {
+      viewer.destroy();
+    };
+  }, [imageUrl]);
+
+  return <div ref={viewerRef} style={{ height: '500px', width: '100%' }} />;
+};
+
+export default Image360Viewer;