nextjs-test/app/unity/page.tsx

"use client";
import Image from "next/image";
import { useSearchParams } from "next/navigation";
import { Suspense, useCallback, useState } from "react";
import { Unity, UnityConfig, useUnityContext } from "react-unity-webgl";
const unityConfigBuilder: (path: string) => UnityConfig = (path) => ({
  loaderUrl: `${path}.loader.js`,
  dataUrl: `${path}.data`,
  frameworkUrl: `${path}.framework.js`,
  codeUrl: `${path}.wasm`,
  streamingAssetsUrl: "StreamingAssets",
  companyName: "DTOL",
  productName: "3d-test",
  productVersion: "0.1",
});

const option = [
  {
    value: "/unity/3d-test/Build/3d-test",
    name: "3d-test",
    description:
      "마우스 오른쪽 키다운으로 카메라 각도 조절, WASD로 이동, Shift로 가속하는 것까지 구현되었습니다.",
  },
  {
    value: "/unity/kartrider/Build/kartrider",
    name: "kartrider",
    description: "튜토리얼을 진행하며 만든 카트라이더 게임입니다.",
  },
  {
    value: "/unity/test-project/build",
    name: "test-project",
    description: "처음 만든 프로젝트입니다.",
  },
];

const ohgOption = [
  {
    value: 0,
    label: "ohg1",
  },
  {
    value: 1,
    label: "ohg2",
  },
  {
    value: 2,
    label: "ohg3",
  },
];

const frameOption = [
  {
    value: 0,
    label: "frame1",
  },
  {
    value: 1,
    label: "frame2",
  },
  {
    value: 2,
    label: "frame3",
  },
];

function UnityComponent() {
  const params = useSearchParams();
  const p = params.get("p");
  const [selectedIndex, setSelectedIndex] = useState({ ohg: 0, frame: 0 });
  if (!p || isNaN(Number(p))) location.href = "/unity?p=0";

  const {
    unityProvider,
    isLoaded,
    loadingProgression,
    initialisationError,
    UNSAFE__unityInstance,
  } = useUnityContext(unityConfigBuilder(option[Number(p)].value));

  const loadingPercentage = Math.round(loadingProgression * 100);

  const handleSelectIndex = useCallback(
    // objectName: ohg | frame, newValue: "0", "1", ...
    (objectName: keyof typeof selectedIndex, newValue: string) => {
      const newIndex = Number(newValue);
      // 화면상의 select 컴포넌트 업데이트
      setSelectedIndex((prev) => {
        if (objectName === "ohg") {
          return {
            ...prev,
            ohg: newIndex,
          };
        } else {
          return {
            ...prev,
            frame: newIndex,
          };
        }
      });
      // 유니티 스크립트 호출 - objectName 및 함수 이름은 유니티의 것과 동일해야 함
      UNSAFE__unityInstance?.SendMessage(objectName, "HandleSelect", newIndex);
    },
    [UNSAFE__unityInstance],
  );

  return (
    <>
      <div className="mb-5 mt-5">
        새 Unity 프로젝트를 생성하고, WebGL로 빌드 후 빌드 산출물을
        react-unity-webgl 라이브러리를 통해 실행했다.
      </div>
      {option?.[Number(p)] && (
        <div className="mb-5">{option[Number(p)].description}</div>
      )}
      <div className="flex h-[650px] w-[800px] flex-col">
        {isLoaded === false && (
          <div className="absolute z-10 flex h-[600px] w-[800px] items-center justify-center bg-gray-500">
            <p>Loading... ({loadingPercentage}%)</p>
          </div>
        )}
        <Unity className="h-[600px] w-[800px]" unityProvider={unityProvider} />
        <div className="mt-auto flex">
          <select
            value={Number(p)}
            onChange={(e) => (location.href = `/unity?p=${e.target.value}`)}
            className="mt-5"
          >
            {option.map((o, i) => (
              <option key={`${o}-${i}`} value={i}>
                {o.name}
              </option>
            ))}
          </select>
          {Number(p) == 0 && (
            <>
              <select
                value={selectedIndex.ohg}
                onChange={(e) => handleSelectIndex("ohg", e.target.value)}
                className="ml-5 mt-5"
              >
                {ohgOption.map((o, i) => (
                  <option key={`${o.label}-${i}`} value={o.value}>
                    {o.label}
                  </option>
                ))}
              </select>
              <select
                value={selectedIndex.frame}
                onChange={(e) => handleSelectIndex("frame", e.target.value)}
                className="ml-5 mt-5"
              >
                {frameOption.map((o, i) => (
                  <option key={`${o.label}-${i}`} value={o.value}>
                    {o.label}
                  </option>
                ))}
              </select>
            </>
          )}
          <Image
            src={"/unity/3d-test/TemplateData/fullscreen-button.png"}
            alt="전체 화면 버튼"
            title="전체 화면으로 보기"
            width={38}
            height={38}
            className="ml-auto mt-2 cursor-pointer"
            onClick={() => UNSAFE__unityInstance?.SetFullscreen(1)}
          />
        </div>
      </div>
    </>
  );
}

export default function UnityWrapper() {
  return (
    <Suspense>
      <UnityComponent />
    </Suspense>
  );
}