28 lines
1016 B
TypeScript
28 lines
1016 B
TypeScript
import { Unity, useUnityContext } from "react-unity-webgl";
|
|
|
|
export default function Home() {
|
|
const { unityProvider, isLoaded, loadingProgression } = useUnityContext({
|
|
loaderUrl: "build/myunityapp.loader.js",
|
|
dataUrl: "build/myunityapp.data",
|
|
frameworkUrl: "build/myunityapp.framework.js",
|
|
codeUrl: "build/myunityapp.wasm",
|
|
});
|
|
|
|
// We'll round the loading progression to a whole number to represent the
|
|
// percentage of the Unity Application that has loaded.
|
|
const loadingPercentage = Math.round(loadingProgression * 100);
|
|
|
|
return (
|
|
<div className="relative h-[600px] w-[800px]">
|
|
{isLoaded === false && (
|
|
// We'll conditionally render the loading overlay if the Unity
|
|
// Application is not loaded.
|
|
<div className="absolute left-0 top-0 flex h-full w-full items-center justify-center bg-gray-500">
|
|
<p>Loading... ({loadingPercentage}%)</p>
|
|
</div>
|
|
)}
|
|
<Unity className="unity" unityProvider={unityProvider} />
|
|
</div>
|
|
);
|
|
}
|