diff --git a/.env b/.env index fd33a88..f7ceccd 100644 --- a/.env +++ b/.env @@ -1 +1,2 @@ -# placing my env here \ No newline at end of file +# placing my env here +DOMAIN=http://localhost:3000 \ No newline at end of file diff --git a/.env.production b/.env.production new file mode 100644 index 0000000..a9531f7 --- /dev/null +++ b/.env.production @@ -0,0 +1,2 @@ +# placing my env here +DOMAIN=https://nextjs-test-rnd.vercel.app \ No newline at end of file diff --git a/app/constant/index.ts b/app/constant/index.ts new file mode 100644 index 0000000..88df49c --- /dev/null +++ b/app/constant/index.ts @@ -0,0 +1,81 @@ +import { ObjectType } from "../types"; + +export 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: "처음 만든 프로젝트입니다.", + }, +]; + +// 가상의 가로, 세로, 대각선 +export const ohg: ObjectType[] = [ + { + value: 0, + label: "ohg1", + length: { + horizontal: 10, + vertical: 10, + diagonal: 14, + }, + }, + { + value: 1, + label: "ohg2", + length: { + horizontal: 12, + vertical: 16, + diagonal: 20, + }, + }, + { + value: 2, + label: "ohg3", + length: { + horizontal: 10, + vertical: 24, + diagonal: 26, + }, + }, +]; + +export const frame: ObjectType[] = [ + { + value: 0, + label: "frame1", + length: { + horizontal: 10, + vertical: 12, + diagonal: 14, + }, + }, + { + value: 1, + label: "frame2", + length: { + horizontal: 12, + vertical: 14, + diagonal: 16, + }, + }, + { + value: 2, + label: "frame3", + length: { + horizontal: 13, + vertical: 15, + diagonal: 17, + }, + }, +]; diff --git a/app/fit/route.ts b/app/fit/route.ts new file mode 100644 index 0000000..bcabb4e --- /dev/null +++ b/app/fit/route.ts @@ -0,0 +1,31 @@ +import { NextRequest } from "next/server"; +import { frame, ohg } from "../constant"; + +export async function GET(request: NextRequest) { + const { searchParams } = new URL(request.url); + const o = searchParams.get("o"); + const f = searchParams.get("f"); + const ohgObject = ohg.find((obj) => obj.value === Number(o)); + const frameObject = frame.find((obj) => obj.value === Number(f)); + let match = 0; + if (!ohgObject || !frameObject) return Response.json({ match }); + // console.log(ohgObject); + // console.log(frameObject); + + // 임시로 만든건데 rms 0~10을 매치 100~0으로 맞추자. (10이 넘어가면 매치는 0) + const rms = + (Object.keys(frameObject.length).reduce( + (prev, curr) => + prev + + (ohgObject.length[curr as keyof typeof ohgObject.length] - + frameObject.length[curr as keyof typeof frameObject.length]) ** + 2, + 0, + ) / + 3) ** + 0.5; + + if (rms < 10) match = 100 - rms * 10; + + return Response.json({ match }); +} diff --git a/app/types/index.ts b/app/types/index.ts new file mode 100644 index 0000000..bd5d0fe --- /dev/null +++ b/app/types/index.ts @@ -0,0 +1,11 @@ +export type LengthType = { + horizontal: number; + vertical: number; + diagonal: number; +}; + +export type ObjectType = { + value: number; + label: string; + length: LengthType; +}; diff --git a/app/unity/page.tsx b/app/unity/page.tsx index b00ab18..56aaabd 100644 --- a/app/unity/page.tsx +++ b/app/unity/page.tsx @@ -1,181 +1,30 @@ -"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", -}); +import { Suspense } from "react"; +import { frame, ohg, option } from "../constant"; +import Unity from "./unity"; -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 getItem = async () => { + return await Promise.resolve({ option, ohg, frame }); +}; -const ohgOption = [ - { - value: 0, - label: "ohg1", - }, - { - value: 1, - label: "ohg2", - }, - { - value: 2, - label: "ohg3", - }, -]; +const getInitMatch = async () => { + return await fetch(`${process.env.DOMAIN}/fit?o=0&f=0`, { + method: "GET", + }); +}; -const frameOption = [ - { - value: 0, - label: "frame1", - }, - { - value: 1, - label: "frame2", - }, - { - value: 2, - label: "frame3", - }, -]; +export default async function UnityComponent() { + const { option, ohg, frame } = await getItem(); + const res = await getInitMatch(); + const initMatch = (await res.json()) as { match: number }; -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 ( - <> -
- 새 Unity 프로젝트를 생성하고, WebGL로 빌드 후 빌드 산출물을 - react-unity-webgl 라이브러리를 통해 실행했다. -
- {option?.[Number(p)] && ( -
{option[Number(p)].description}
- )} -
- {isLoaded === false && ( -
-

Loading... ({loadingPercentage}%)

-
- )} - -
- - {Number(p) == 0 && ( - <> - - - - )} - 전체 화면 버튼 UNSAFE__unityInstance?.SetFullscreen(1)} - /> -
-
- - ); -} - -export default function UnityWrapper() { return ( - + ); } diff --git a/app/unity/unity.tsx b/app/unity/unity.tsx index 3cead78..c3c33d7 100644 --- a/app/unity/unity.tsx +++ b/app/unity/unity.tsx @@ -1,7 +1,152 @@ "use client"; +import Image from "next/image"; +import { useSearchParams } from "next/navigation"; +import { useCallback, useEffect, useState } from "react"; +import { Unity, UnityConfig, useUnityContext } from "react-unity-webgl"; +import { ObjectType } from "../types"; +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 Unity = () => { - return <>; -}; +export default function UnityComponent({ + initMatch, + option = [], + ohg = [], + frame = [], +}: { + option: { + value: string; + name: string; + description: string; + }[]; + ohg: ObjectType[]; + frame: ObjectType[]; + initMatch: number; +}) { + const params = useSearchParams(); + const p = params.get("p"); + const [selectedIndex, setSelectedIndex] = useState({ ohg: 0, frame: 0 }); + const [match, setMatch] = useState(initMatch); + if (!p || isNaN(Number(p))) location.href = "/unity?p=0"; -export default Unity; + const { unityProvider, isLoaded, loadingProgression, 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], + ); + + useEffect(() => { + (async () => { + const res = await fetch( + `/fit?o=${selectedIndex.ohg}&f=${selectedIndex.frame}`, + { + method: "GET", + }, + ); + console.log(res); + const json = (await res.json()) as { match: number }; + if (isNaN(Number(json.match)) === false) setMatch(json.match); + })(); + }, [selectedIndex.frame, selectedIndex.ohg]); + + return ( + <> +
+ 새 Unity 프로젝트를 생성하고, WebGL로 빌드 후 빌드 산출물을 + react-unity-webgl 라이브러리를 통해 실행했다. +
+ {option?.[Number(p)] && ( +
{option[Number(p)].description}
+ )} +
+ {isLoaded === false && ( +
+

Loading... ({loadingPercentage}%)

+
+ )} + +
+ + {Number(p) == 0 && ( + <> + + +
+ 매치율: {`${match?.toFixed?.(2) ?? 100}`}% +
+ + )} + 전체 화면 버튼 UNSAFE__unityInstance?.SetFullscreen(1)} + /> +
+
+ + ); +} diff --git a/next.config.mjs b/next.config.mjs index 8c8bab6..241edd8 100644 --- a/next.config.mjs +++ b/next.config.mjs @@ -1,6 +1,6 @@ /** @type {import('next').NextConfig} */ const nextConfig = { - output: "standalone", + // output: "standalone", }; export default nextConfig;