35 lines
1.3 KiB
TypeScript
35 lines
1.3 KiB
TypeScript
"use client";
|
|
import { Unity, useUnityContext } from "react-unity-webgl";
|
|
|
|
export default function Home() {
|
|
const { unityProvider, isLoaded, loadingProgression } = useUnityContext({
|
|
loaderUrl: "/unity/test-project/build.loader.js",
|
|
dataUrl: "/unity/test-project/build.data",
|
|
frameworkUrl: "/unity/test-project/build.framework.js",
|
|
codeUrl: "/unity/test-project/build.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="mb-5 mt-5">
|
|
새 Unity 프로젝트를 생성하고, WebGL로 빌드 후 빌드 산출물을
|
|
react-unity-webgl 라이브러리를 통해 실행했다.
|
|
</div>
|
|
<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="h-full w-full" unityProvider={unityProvider} />
|
|
</div>
|
|
</>
|
|
);
|
|
}
|