add sample unity app with webgl

This commit is contained in:
sjwie 2024-02-16 17:14:40 +09:00
parent 7495333b7d
commit f277056188
5 changed files with 18342 additions and 14 deletions

View File

@ -1,11 +1,12 @@
"use client";
import { Unity, useUnityContext } from "react-unity-webgl"; import { Unity, useUnityContext } from "react-unity-webgl";
export default function Home() { export default function Home() {
const { unityProvider, isLoaded, loadingProgression } = useUnityContext({ const { unityProvider, isLoaded, loadingProgression } = useUnityContext({
loaderUrl: "build/myunityapp.loader.js", loaderUrl: "/unity/test-project/build.loader.js",
dataUrl: "build/myunityapp.data", dataUrl: "/unity/test-project/build.data",
frameworkUrl: "build/myunityapp.framework.js", frameworkUrl: "/unity/test-project/build.framework.js",
codeUrl: "build/myunityapp.wasm", codeUrl: "/unity/test-project/build.wasm",
}); });
// We'll round the loading progression to a whole number to represent the // We'll round the loading progression to a whole number to represent the
@ -13,15 +14,21 @@ export default function Home() {
const loadingPercentage = Math.round(loadingProgression * 100); const loadingPercentage = Math.round(loadingProgression * 100);
return ( return (
<div className="relative h-[600px] w-[800px]"> <>
{isLoaded === false && ( <div className="mb-5 mt-5">
// We'll conditionally render the loading overlay if the Unity Unity , WebGL로
// Application is not loaded. react-unity-webgl .
<div className="absolute left-0 top-0 flex h-full w-full items-center justify-center bg-gray-500"> </div>
<p>Loading... ({loadingPercentage}%)</p> <div className="relative h-[600px] w-[800px]">
</div> {isLoaded === false && (
)} // We'll conditionally render the loading overlay if the Unity
<Unity className="unity" unityProvider={unityProvider} /> // Application is not loaded.
</div> <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>
</>
); );
} }

Binary file not shown.

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

Binary file not shown.