{"_id":"@futureverse/react-unity-viewer","_rev":"39-69d903e2f538d39dda527771d995bd02","name":"@futureverse/react-unity-viewer","dist-tags":{"latest":"0.1.2"},"versions":{"0.1.1":{"name":"@futureverse/react-unity-viewer","version":"0.1.1","keywords":["react","webgl","unity"],"author":"","license":"ISC","_id":"@futureverse/react-unity-viewer@0.1.1","maintainers":[{"name":"danillocavalante","email":"danillocastilhocavalcante@gmail.com"},{"name":"samb-fv","email":"sam.brightheart@futureverse.com"},{"name":"felixschl","email":"felixschlitter@gmail.com"},{"name":"pramodya-centrapass","email":"pramodya.dealwis@centrapass.com"},{"name":"admin-futureverse","email":"admin@futureverse.com"}],"homepage":"https://github.com/futureversecom/react-unity-viewer#readme","bugs":{"url":"https://github.com/futureversecom/react-unity-viewer/issues"},"css":"dist/style.css","dist":{"shasum":"bfac5870591c1ecb6e60853142d6b1995efe1fe9","tarball":"https://registry.npmjs.org/@futureverse/react-unity-viewer/-/react-unity-viewer-0.1.1.tgz","fileCount":13,"integrity":"sha512-NBsw+z6M3/W34jPPr/DRdnY3FeTCJPWiMZbUFQkb7T5dTk37w9bmb5oL4LgD91ajenGPCaHWRQk8Q637pOjnfQ==","signatures":[{"sig":"MEYCIQDgUEAXNxJnfYjMyL5A6Dxr20FMECUTVW1ItXtVm1ZzPwIhAKXLxVZ+WRSJTDQVQg6KEE9dC5/hb2hGobyvWsMqA+YP","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":784652},"main":"dist/index.cjs.js","types":"dist/index.d.ts","module":"dist/index.es.js","gitHead":"b742f07cedc1296852e50eb4f162680eeec3a132","private":false,"scripts":{"dev":"vite --host --open","build":"tsc && vite build && dts-bundle-generator --config ./dts-bundle-generator.config.ts","watch":"tsc && vite build --watch","lint:styles":"stylelint ./**/*.{css,scss}","lint:scripts":"eslint . --ext .ts","format:styles":"stylelint ./**/*.{css,scss} --fix","format:scripts":"prettier . --write"},"_npmUser":{"name":"danillocavalante","email":"danillocastilhocavalcante@gmail.com"},"umd:main":"dist/index.umd.js","repository":{"url":"git+https://github.com/futureversecom/react-unity-viewer.git","type":"git"},"_npmVersion":"9.6.7","description":"Futureverse React Unity Viewer provides a modern solution for embedding Unity WebGL builds in your React Application while providing advanced APIs for two way communication and interaction between Unity and React.","directories":{"example":"examples"},"_nodeVersion":"18.14.0","dependencies":{"react":"^18.2.0","react-dom":"^18.2.0"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^4.2.1","tslib":"^2.4.1","eslint":"^8.29.0","ts-node":"^10.9.1","prettier":"^2.8.1","stylelint":"^14.16.0","detect-gpu":"^5.0.21","typescript":"^5.0.4","@types/node":"^18.15.11","@types/react":"^18.0.26","@types/react-dom":"^18.0.9","react-unity-webgl":"^9.4.0","@vitejs/plugin-react":"^3.1.0","dts-bundle-generator":"^7.1.0","eslint-config-prettier":"^8.5.0","eslint-plugin-prettier":"^4.2.1","rollup-plugin-css-only":"^4.3.0","@typescript-eslint/parser":"^5.46.0","stylelint-config-recommended":"^9.0.0","@types/rollup-plugin-css-only":"^3.1.0","@typescript-eslint/eslint-plugin":"^5.46.0","stylelint-config-sass-guidelines":"^9.0.1"},"_npmOperationalInternal":{"tmp":"tmp/react-unity-viewer_0.1.1_1685402348895_0.678213618078874","host":"s3://npm-registry-packages"}},"0.1.2":{"name":"@futureverse/react-unity-viewer","version":"0.1.2","keywords":["react","webgl","unity"],"author":"","license":"ISC","_id":"@futureverse/react-unity-viewer@0.1.2","maintainers":[{"name":"danillocavalante","email":"danillocastilhocavalcante@gmail.com"},{"name":"samb-fv","email":"sam.brightheart@futureverse.com"},{"name":"felixschl","email":"felixschlitter@gmail.com"},{"name":"pramodya-centrapass","email":"pramodya.dealwis@centrapass.com"},{"name":"admin-futureverse","email":"admin@futureverse.com"}],"homepage":"https://github.com/futureversecom/react-unity-viewer#readme","bugs":{"url":"https://github.com/futureversecom/react-unity-viewer/issues"},"css":"dist/style.css","dist":{"shasum":"726bbce49479903c7a3b98b4de7f0bbb77e2b62c","tarball":"https://registry.npmjs.org/@futureverse/react-unity-viewer/-/react-unity-viewer-0.1.2.tgz","fileCount":13,"integrity":"sha512-dyeySJB6+rKVfGWC7aRT87BmohjHRoP82LzFd/EyvmYIo8joRQnKEYYzZ2dBPtHGEvgUt99Hn20wM8UB6Gbh6Q==","signatures":[{"sig":"MEYCIQDehQw0GIZoM3u58psHvA+9lidMc+H7TVepHzWHl9aiEgIhAM699mgz7fKrsKDXtwOovbQp+jaxmYGC4GhlsIbyf+M3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":785863},"main":"dist/index.cjs.js","types":"dist/index.d.ts","module":"dist/index.es.js","gitHead":"b742f07cedc1296852e50eb4f162680eeec3a132","private":false,"scripts":{"dev":"vite --host --open","build":"tsc && vite build && dts-bundle-generator --config ./dts-bundle-generator.config.ts","watch":"tsc && vite build --watch","lint:styles":"stylelint ./**/*.{css,scss}","lint:scripts":"eslint . --ext .ts","format:styles":"stylelint ./**/*.{css,scss} --fix","format:scripts":"prettier . --write"},"_npmUser":{"name":"danillocavalante","email":"danillocastilhocavalcante@gmail.com"},"umd:main":"dist/index.umd.js","repository":{"url":"git+https://github.com/futureversecom/react-unity-viewer.git","type":"git"},"_npmVersion":"9.6.7","description":"Futureverse React Unity Viewer provides a modern solution for embedding Unity WebGL builds in your React Application while providing advanced APIs for two way communication and interaction between Unity and React.","directories":{"example":"examples"},"_nodeVersion":"18.14.0","dependencies":{"react":"^18.2.0","react-dom":"^18.2.0"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^4.2.1","tslib":"^2.4.1","eslint":"^8.29.0","ts-node":"^10.9.1","prettier":"^2.8.1","stylelint":"^14.16.0","detect-gpu":"^5.0.21","typescript":"^5.0.4","@types/node":"^18.15.11","@types/react":"^18.0.26","@types/react-dom":"^18.0.9","react-unity-webgl":"^9.4.0","@vitejs/plugin-react":"^3.1.0","dts-bundle-generator":"^7.1.0","eslint-config-prettier":"^8.5.0","eslint-plugin-prettier":"^4.2.1","rollup-plugin-css-only":"^4.3.0","@typescript-eslint/parser":"^5.46.0","stylelint-config-recommended":"^9.0.0","@types/rollup-plugin-css-only":"^3.1.0","@typescript-eslint/eslint-plugin":"^5.46.0","stylelint-config-sass-guidelines":"^9.0.1"},"_npmOperationalInternal":{"tmp":"tmp/react-unity-viewer_0.1.2_1685403031830_0.8240371304493805","host":"s3://npm-registry-packages"}}},"time":{"created":"2023-05-29T23:19:08.809Z","modified":"2025-10-27T21:03:23.995Z","0.1.1":"2023-05-29T23:19:09.144Z","0.1.2":"2023-05-29T23:30:32.077Z"},"bugs":{"url":"https://github.com/futureversecom/react-unity-viewer/issues"},"license":"ISC","homepage":"https://github.com/futureversecom/react-unity-viewer#readme","keywords":["react","webgl","unity"],"repository":{"url":"git+https://github.com/futureversecom/react-unity-viewer.git","type":"git"},"description":"Futureverse React Unity Viewer provides a modern solution for embedding Unity WebGL builds in your React Application while providing advanced APIs for two way communication and interaction between Unity and React.","maintainers":[{"email":"admin@futureverse.com","name":"admin-futureverse"},{"email":"gareth.daines@futureverse.com","name":"garethdainesnpm"},{"email":"john@sylo.io","name":"jcsanpedro"}],"readme":"# @futureverse/react-unity-viewer\n\nWhen bringing your Unity Application to the web, you might need to communicate with Components on a webpage, build interactive interfaces or might want to implement functionality using Web APIs which Unity does not expose. Combining Unity with React is a great way to achieve these goals. Unity Viewer provides a modern solution for embedding Unity WebGL builds in your React Application while providing advanced APIs for two way communication and interaction between Unity and React.\n\n## Unity Build\n\nPlease use the `MessageHandler` script available on `Futureverse - Asset Viewer` package for Unity in order to receive messages from React.\n\n## Installation\n\nGet started by installing Unity Viewer using the Node Package Manager or Yarn in your JavaScript or TypeScript React project.\n\n```sh\nnpm install @futureverse/react-unity-viewer\n# or\nyarn install @futureverse/react-unity-viewer\n# or\npnpm install @futureverse/react-unity-viewer\n```\n\n## Examples\n\nThe following examples are also available on `/examples` folder.\n\nFirst, run the development server:\n\n```bash\nnpm run dev\n# or\nyarn dev\n# or\npnpm dev\n```\n\nOpen [http://localhost:3000](http://localhost:3000) with your browser to see the result.\n\n## Basic usage:\n\nImport the Unity Viewer Styles to your project using the command below on your css file.\n\n```css\n@import url(\"./node_modules/@futureverse/react-unity-viewer/dist/style.css\");\n```\n\nIn order to use the unity viewer you will need the context `<UnityViewerContextProvider>` and the viewer `<UnityViewer>`, viewer requires the context to be able to control the state of the application such as loading, open and close states and also to receive react messages.\n\n### Common context hooks:\n\n```javascript\nconst {\n  openUnity,\n  closeUnity,\n  isLoaded,\n  isReady,\n  loadingProgression,\n  dispatchPlayerData,\n} = useUnityViewerContext();\n```\n\n### Basic usage example:\n\n```javascript\nimport {\n  UnityViewerContextProvider,\n  UnityViewer,\n} from \"@futureverse/react-unity-viewer\";\n\n<UnityViewerContextProvider>\n  <UnityViewer unityHostURL=\"UNITY_HOST_URL\" unityFileName=\"UNITY_FILE_NAME\" />\n</UnityViewerContextProvider>;\n```\n\nby default the application won't load the unity player straight away, to load the unity player you need to use the `openUnity` hook.\n\n### Basic usage example for opening the unity application\n\n```javascript\nimport {\n  UnityViewerContextProvider,\n  UnityViewer,\n  UnityViewerControls,\n  UnityViewerPreloader,\n  useUnityViewerContext,\n} from \"@futureverse/react-unity-viewer\";\n\nconst CustomViewerStarter = () => {\n  const { openUnity } = useUnityViewerContext();\n\n  const handleLoadUnity = () => {\n    openUnity({\n      initialMessageFunctionName: \"INITIAL_FUNCTION_NAME_CALLED_ON_UNITY\",\n      initialMessageData: \"INITIAL_FUNCTION_DATA_CALLED_ON_UNITY\",\n    });\n  };\n\n  return (\n    <div className=\"absolute inset-0 flex items-center justify-center\">\n      <button\n        onClick={handleLoadUnity}\n        className=\"bg-black text-white rounded-md px-3 py-1.5 border border-white\"\n      >\n        Click here to load Unity Application\n      </button>\n    </div>\n  );\n};\n\nconst UnityViewerWithCustomUnityStarter = () => {\n  return (\n    <main className=\"absolute inset-0 bg-gray-50\">\n      <UnityViewerContextProvider>\n        <CustomViewerStarter />\n        <UnityViewer\n          unityHostURL=\"https://fv-goblins.s3.us-west-2.amazonaws.com/gag-viewer-dev\"\n          unityFileName=\"gag\"\n        />\n        <UnityViewerControls />\n        <UnityViewerPreloader />\n      </UnityViewerContextProvider>\n    </main>\n  );\n};\n```\n\n### Basic usage example with default preloader and controls:\n\n```javascript\nimport {\n  UnityViewerContextProvider,\n  UnityViewerStarter,\n  UnityViewer,\n  UnityViewerControls,\n  UnityViewerPreloader,\n} from \"@futureverse/react-unity-viewer\";\n\n<UnityViewerContextProvider>\n  <UnityViewerStarter\n    initialMessageFunctionName=\"INITIAL_FUNCTION_NAME_CALLED_ON_UNITY\"\n    initialMessageData=\"INITIAL_FUNCTION_DATA_CALLED_ON_UNITY\"\n  />\n  <UnityViewer unityHostURL=\"UNITY_HOST_URL\" unityFileName=\"UNITY_FILE_NAME\" />\n  <UnityViewerControls />\n  <UnityViewerPreloader />\n</UnityViewerContextProvider>;\n```\n\n### Basic usage example for Gods and Goblins project with default preloader and controls:\n\n```javascript\nimport {\n  UnityViewerContextProvider,\n  UnityViewerStarter,\n  UnityViewer,\n  UnityViewerControls,\n  UnityViewerPreloader,\n} from \"@futureverse/react-unity-viewer\";\n\n<UnityViewerContextProvider>\n  <UnityViewerStarter\n    initialMessageFunctionName=\"update_model\"\n    initialMessageData={{\n      URL: \"https://fv-goblins.s3.us-west-2.amazonaws.com/goblins/000-34_050-18__010-5078_1V0-4922__0C1-0/glb/000-34_050-18__010-5078_1V0-4922__0C1-0.glb\",\n    }}\n  />\n  <UnityViewer\n    unityHostURL=\"https://fv-goblins.s3.us-west-2.amazonaws.com/gag-viewer-dev\"\n    unityFileName=\"gag\"\n  />\n  <UnityViewerControls />\n  <UnityViewerPreloader />\n</UnityViewerContextProvider>;\n```\n\n### Custom preloader example:\n\n```javascript\nimport { IconFutureVerse } from \"@/icons/IconFutureVerse\";\nimport { IconGodsAndGoblins } from \"@/icons/IconGodsAndGoblins\";\n\nimport {\n  UnityViewerContextProvider,\n  UnityViewerStarter,\n  UnityViewer,\n  UnityViewerControls,\n  useUnityViewerContext,\n} from \"@futureverse/react-unity-viewer\";\n\nconst CustomViewerPreloader = () => {\n  const { isUnityOpened, isLoaded, loadingProgression } =\n    useUnityViewerContext();\n  return (\n    <>\n      {isUnityOpened && (\n        <>\n          {!isLoaded && (\n            <div className=\"absolute inset-0 flex items-center justify-center bg-black text-xs text-white\">\n              <div className=\"flex w-full max-w-[500px] flex-col gap-10 px-10\">\n                <div className=\"flex justify-center\">\n                  <IconGodsAndGoblins />\n                </div>\n                <div className=\"w-full overflow-hidden\">\n                  <div className=\"relative w-full overflow-hidden\">\n                    <div className=\"relative h-[3px] w-full bg-white opacity-10\"></div>\n                    <div\n                      className=\"absolute left-0 top-0 w-full h-full transform bg-white\"\n                      style={{\n                        width: `${loadingProgression * 100}%`,\n                      }}\n                    ></div>\n                  </div>\n                </div>\n                <div className=\"flex justify-center\">\n                  <a\n                    href=\"https://www.futureverse.com/\"\n                    target=\"_blank\"\n                    className=\"flex items-center gap-1.5\"\n                    rel=\"noreferrer\"\n                  >\n                    Powered by\n                    <IconFutureVerse />\n                  </a>\n                </div>\n              </div>\n            </div>\n          )}\n        </>\n      )}\n    </>\n  );\n};\n\nconst UnityViewerWithCustomPreloader = () => {\n  return (\n    <main className=\"absolute inset-0 bg-gray-50\">\n      <UnityViewerContextProvider>\n        <UnityViewerStarter\n          initialMessageFunctionName=\"update_model\"\n          initialMessageData={{\n            URL: \"https://fv-goblins.s3.us-west-2.amazonaws.com/goblins/000-34_050-18__010-5078_1V0-4922__0C1-0/glb/000-34_050-18__010-5078_1V0-4922__0C1-0.glb\",\n          }}\n        />\n        <UnityViewer\n          unityHostURL=\"https://fv-goblins.s3.us-west-2.amazonaws.com/gag-viewer-dev\"\n          unityFileName=\"gag\"\n        />\n        <UnityViewerControls />\n        <CustomViewerPreloader />\n      </UnityViewerContextProvider>\n    </main>\n  );\n};\n```\n\n### Custom controls example:\n\n```javascript\nimport {\n  UnityViewerContextProvider,\n  UnityViewerStarter,\n  UnityViewer,\n  UnityViewerPreloader,\n  useUnityViewerContext,\n} from \"@futureverse/react-unity-viewer\";\n\nconst CustomViewerControls = () => {\n  const { isReady, closeUnity, dispatchPlayerData } = useUnityViewerContext();\n\n  const handleFullBody = () => {\n    dispatchPlayerData(\"camera_composition_default\", {});\n  };\n\n  const handleUpperBody = () => {\n    dispatchPlayerData(\"camera_composition_key\", {\n      CompositionKey: \"head\",\n    });\n  };\n\n  return (\n    <>\n      {isReady && (\n        <div className=\"absolute left-0 right-0 bottom-0 p-2\">\n          <div className=\"flex items-center justify-center gap-2 text-sm\">\n            <button\n              className=\"bg-black text-white rounded-md px-3 py-1.5 border border-white\"\n              onClick={closeUnity}\n            >\n              Exit\n            </button>\n            <button\n              className=\"bg-black text-white rounded-md px-3 py-1.5 border border-white\"\n              onClick={handleFullBody}\n            >\n              Full body\n            </button>\n            <button\n              className=\"bg-black text-white rounded-md px-3 py-1.5 border border-white\"\n              onClick={handleUpperBody}\n            >\n              Upper body\n            </button>\n          </div>\n        </div>\n      )}\n    </>\n  );\n};\n\nconst UnityViewerWithCustomControls = () => {\n  return (\n    <main className=\"absolute inset-0 bg-gray-50\">\n      <UnityViewerContextProvider>\n        <UnityViewerStarter\n          initialMessageFunctionName=\"update_model\"\n          initialMessageData={{\n            URL: \"https://fv-goblins.s3.us-west-2.amazonaws.com/goblins/000-34_050-18__010-5078_1V0-4922__0C1-0/glb/000-34_050-18__010-5078_1V0-4922__0C1-0.glb\",\n          }}\n        />\n        <UnityViewer\n          unityHostURL=\"https://fv-goblins.s3.us-west-2.amazonaws.com/gag-viewer-dev\"\n          unityFileName=\"gag\"\n        />\n        <CustomViewerControls />\n        <UnityViewerPreloader />\n      </UnityViewerContextProvider>\n    </main>\n  );\n};\n```\n\n### Sending mouse position to unity example:\n\n```javascript\nimport { useEffect } from \"react\";\n\nimport {\n  UnityViewerContextProvider,\n  UnityViewerStarter,\n  UnityViewer,\n  UnityViewerPreloader,\n  useUnityViewerContext,\n} from \"@futureverse/react-unity-viewer\";\n\nconst CustomMousePosition = () => {\n  const { dispatchPlayerData } = useUnityViewerContext();\n\n  useEffect(() => {\n    const onMouseMove = (event: MouseEvent) => {\n      const target = event.target as HTMLElement;\n      const localX = event.clientX - target.offsetLeft;\n      const localY = event.clientY - target.offsetTop;\n      const localMousePosition = { x: localX, y: localY };\n      const globalMousePosition = { x: event.clientX, y: event.clientY };\n\n      dispatchPlayerData(`mouse_move_position`, {\n        globalMousePosition,\n        localMousePosition,\n      });\n    };\n\n    window.addEventListener(\"mousemove\", onMouseMove);\n\n    return () => {\n      window.removeEventListener(\"mousemove\", onMouseMove);\n    };\n  }, [dispatchPlayerData]);\n\n  return <></>;\n};\n\nconst CustomPanel = () => {\n  const { isReady } = useUnityViewerContext();\n\n  return <>{isReady && <CustomMousePosition />}</>;\n};\n\nconst UnityViewerWithCustomControls = () => {\n  return (\n    <main className=\"absolute inset-0 bg-gray-50\">\n      <UnityViewerContextProvider>\n        <UnityViewerStarter\n          initialMessageFunctionName=\"update_model\"\n          initialMessageData={{\n            URL: \"https://fv-goblins.s3.us-west-2.amazonaws.com/goblins/000-34_050-18__010-5078_1V0-4922__0C1-0/glb/000-34_050-18__010-5078_1V0-4922__0C1-0.glb\",\n          }}\n        />\n        <UnityViewer\n          unityHostURL=\"https://fv-goblins.s3.us-west-2.amazonaws.com/gag-viewer-dev\"\n          unityFileName=\"gag\"\n        />\n        <CustomPanel />\n        <UnityViewerPreloader />\n      </UnityViewerContextProvider>\n    </main>\n  );\n};\n```\n\n### Sending container (div) position to unity example:\n\n```javascript\nimport { useEffect, useRef } from \"react\";\n\nimport {\n  UnityViewerContextProvider,\n  UnityViewerStarter,\n  UnityViewer,\n  UnityViewerPreloader,\n  useUnityViewerContext,\n} from \"@futureverse/react-unity-viewer\";\n\nconst CustomContainerPosition = ({\n  children,\n}: {\n  children: React.ReactNode | React.ReactNode[],\n}) => {\n  const containerRef = useRef < HTMLDivElement > null;\n  const { dispatchPlayerData } = useUnityViewerContext();\n\n  useEffect(() => {\n    let animationRequest: number;\n\n    const getContainerRect = () => {\n      return containerRef.current?.getBoundingClientRect();\n    };\n\n    const onRender = () => {\n      const containerRect = getContainerRect();\n      if (containerRect) {\n        dispatchPlayerData(`div_position`, {\n          x: Math.round(containerRect.x) * window.devicePixelRatio,\n          y: Math.round(containerRect.y) * window.devicePixelRatio,\n          width: Math.round(containerRect.width) * window.devicePixelRatio,\n          height: Math.round(containerRect.height) * window.devicePixelRatio,\n        });\n      }\n      animationRequest = requestAnimationFrame(onRender);\n    };\n\n    onRender();\n\n    window.addEventListener(\"resize\", onRender);\n    window.addEventListener(\"scroll\", onRender);\n\n    return () => {\n      window.removeEventListener(\"resize\", onRender);\n      window.removeEventListener(\"scroll\", onRender);\n\n      cancelAnimationFrame(animationRequest);\n    };\n  }, [dispatchPlayerData]);\n  return (\n    <>\n      <div\n        ref={containerRef}\n        style={{\n          position: \"relative\",\n          width: \"100%\",\n        }}\n      >\n        <div>{children}</div>\n      </div>\n    </>\n  );\n};\n\nconst CustomPanel = () => {\n  const { isReady } = useUnityViewerContext();\n\n  return (\n    <>\n      {isReady && (\n        <div className=\"absolute inset-0 overflow-auto h-[2000px] gap-6 flex flex-col justify-between\">\n          <div className=\"bg-red-500 opacity-20 h-[200px]\"></div>\n          <div className=\"bg-red-500 opacity-20 h-[200px]\"></div>\n          <div className=\"bg-red-500 opacity-20 h-[200px]\"></div>\n          <div className=\"bg-red-500 opacity-20 h-[200px]\"></div>\n          <div className=\"bg-red-500 opacity-20 h-[200px]\"></div>\n          <CustomContainerPosition>\n            <div className=\"bg-red-500 opacity-20 h-[200px]\"></div>\n          </CustomContainerPosition>\n        </div>\n      )}\n    </>\n  );\n};\n\nconst UnityViewerWithCustomControls = () => {\n  return (\n    <main className=\"absolute inset-0 bg-gray-50\">\n      <UnityViewerContextProvider>\n        <UnityViewerStarter\n          initialMessageFunctionName=\"update_model\"\n          initialMessageData={{\n            URL: \"https://fv-goblins.s3.us-west-2.amazonaws.com/goblins/000-34_050-18__010-5078_1V0-4922__0C1-0/glb/000-34_050-18__010-5078_1V0-4922__0C1-0.glb\",\n          }}\n        />\n        <UnityViewer\n          unityHostURL=\"https://fv-goblins.s3.us-west-2.amazonaws.com/gag-viewer-dev\"\n          unityFileName=\"gag\"\n        />\n        <UnityViewerPreloader />\n        <CustomPanel />\n      </UnityViewerContextProvider>\n    </main>\n  );\n};\n```\n\n## Updating NPM Package\n\nThe following tasks are available for `npm run` or `yarn`:\n\n- `dev`: Run Vite in host mode for a local development environment (not included in production build)\n- `watch`: Run Vite in watch mode to detect changes to files during development\n- `build`: Run Vite to build a production release distributable\n\n## Development\n\nVite features a host mode to enables development with real time HMR updates directly from the library via the `start` script.\n\nTo test your library from within an app:\n\n- **From your library**: run `npm link` or `yarn link` command to register the package\n- **From your app**: run `npm link \"@futureverse/react-unity-viewer\"` or `yarn link \"@futureverse/react-unity-viewer\"` command to use the library inside your app during development\n\n## Development Cleanup\n\nOnce development completes, `unlink` both your library and test app projects.\n\n- **From your app**: run `npm link \"@futureverse/react-unity-viewer\"` or `yarn link \"@futureverse/react-unity-viewer\"` command to use the library inside your app during development\n- **From your library**: run `npm unlink` or `yarn unlink` command to register the package\n\n## Release Publishing\n\nUpdate your `package.json` to next version number, and remember to tag a release.\n\nOnce ready to submit your package to the NPM Registry, execute the following task via `npm` (or `yarn`):\n\n- `npm run build` &mdash; Build the package\n\nAssure the proper npm login:\n\n```\nnpm login\n```\n\nSubmit your package to the registry:\n\n```\nnpm publish --access public\n```\n\nhttps://www.npmjs.com/package/@futureverse/react-unity-viewer\n","readmeFilename":"README.md"}