Compare commits

..

No commits in common. "8cb39e15dacb8b599ed707506aeb67cb8a2a0734" and "6735463119d19c5e5507552a07720f1dacf8dfd6" have entirely different histories.

41 changed files with 39 additions and 1328 deletions

View File

@ -16,12 +16,6 @@ export default function Home() {
>
Unity
</Link>
<Link
href={`/json-placeholder/${Math.floor(Math.random() * (200 - 1)) + 1}`}
className="m-4 cursor-pointer rounded-md bg-blue-500 p-2 text-white"
>
JSON Placeholder
</Link>
</div>
<p>Next.js tailwind css, ... </p>
</>

View File

@ -1,25 +0,0 @@
// // import chromium from "@sparticuz/chromium";
// // import chromium from "chrome-aws-lambda";
// const chromium = require("chrome-aws-lambda");
// import { NextRequest, NextResponse } from "next/server";
// // import * as puppeteer from "puppeteer-core";
// import puppeteer from "puppeteer";
// export default async function getBrowser() {
// return puppeteer.launch({
// args: [...chromium.args, "--hide-scrollbars", "--disable-web-security"],
// defaultViewport: chromium.defaultViewport,
// headless: false,
// // ignoreHTTPSErrors: true,
// });
// }
// export async function GET(request: NextRequest) {
// const browser = await getBrowser();
// const page = await browser.newPage();
// await page.goto("https://naver.com");
// const buffer = await page.screenshot({ type: "png" });
// await browser.close();
// const base64Image = buffer.toString("base64");
// return NextResponse.json({ image: base64Image });
// }

View File

@ -1,181 +1,34 @@
"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 { Unity, useUnityContext } from "react-unity-webgl";
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));
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);
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">
<div className="relative h-[600px] w-[800px]">
{isLoaded === false && (
<div className="absolute z-10 flex h-[600px] w-[800px] items-center justify-center bg-gray-500">
// 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-[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>
<Unity className="h-full w-full" unityProvider={unityProvider} />
</div>
</>
);
}
export default function UnityWrapper() {
return (
<Suspense>
<UnityComponent />
</Suspense>
);
}

View File

@ -1,7 +0,0 @@
"use client";
const Unity = () => {
return <></>;
};
export default Unity;

View File

@ -3,20 +3,15 @@
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev --turbo",
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"@sparticuz/chromium": "^122.0.0",
"@sparticuz/chromium-min": "^122.0.0",
"@vercel/analytics": "^1.1.3",
"@vercel/speed-insights": "^1.0.9",
"chrome-aws-lambda": "^10.1.0",
"next": "14.1.0",
"puppeteer": "^22.4.0",
"puppeteer-core": "^22.3.0",
"react": "^18",
"react-dom": "^18",
"react-drawio": "^0.1.2",

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

Binary file not shown.

Before

Width:  |  Height:  |  Size: 665 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.3 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 175 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 96 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 109 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 74 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 84 B

View File

@ -1,16 +0,0 @@
body { padding: 0; margin: 0 }
#unity-container { position: absolute }
#unity-container.unity-desktop { left: 50%; top: 50%; transform: translate(-50%, -50%) }
#unity-container.unity-mobile { position: fixed; width: 100%; height: 100% }
#unity-canvas { background: #231F20 }
.unity-mobile #unity-canvas { width: 100%; height: 100% }
#unity-loading-bar { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: none }
#unity-logo { width: 154px; height: 130px; background: url('unity-logo-dark.png') no-repeat center }
#unity-progress-bar-empty { width: 141px; height: 18px; margin-top: 10px; margin-left: 6.5px; background: url('progress-bar-empty-dark.png') no-repeat center }
#unity-progress-bar-full { width: 0%; height: 18px; margin-top: 10px; background: url('progress-bar-full-dark.png') no-repeat center }
#unity-footer { position: relative }
.unity-mobile #unity-footer { display: none }
#unity-webgl-logo { float:left; width: 204px; height: 38px; background: url('webgl-logo.png') no-repeat center }
#unity-build-title { float: right; margin-right: 10px; line-height: 38px; font-family: arial; font-size: 18px }
#unity-fullscreen-button { cursor:pointer; float: right; width: 38px; height: 38px; background: url('fullscreen-button.png') no-repeat center }
#unity-warning { position: absolute; left: 50%; top: 5%; transform: translate(-50%); background: white; padding: 10px; display: none }

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.0 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.0 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.9 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.6 KiB

View File

@ -1,122 +0,0 @@
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Unity WebGL Player | 3d-test</title>
<link rel="shortcut icon" href="TemplateData/favicon.ico">
<link rel="stylesheet" href="TemplateData/style.css">
</head>
<body>
<div id="unity-container" class="unity-desktop">
<canvas id="unity-canvas" width=960 height=600 tabindex="-1"></canvas>
<div id="unity-loading-bar">
<div id="unity-logo"></div>
<div id="unity-progress-bar-empty">
<div id="unity-progress-bar-full"></div>
</div>
</div>
<div id="unity-warning"> </div>
<div id="unity-footer">
<div id="unity-webgl-logo"></div>
<div id="unity-fullscreen-button"></div>
<div id="unity-build-title">3d-test</div>
</div>
</div>
<script>
var container = document.querySelector("#unity-container");
var canvas = document.querySelector("#unity-canvas");
var loadingBar = document.querySelector("#unity-loading-bar");
var progressBarFull = document.querySelector("#unity-progress-bar-full");
var fullscreenButton = document.querySelector("#unity-fullscreen-button");
var warningBanner = document.querySelector("#unity-warning");
// Shows a temporary message banner/ribbon for a few seconds, or
// a permanent error message on top of the canvas if type=='error'.
// If type=='warning', a yellow highlight color is used.
// Modify or remove this function to customize the visually presented
// way that non-critical warnings and error messages are presented to the
// user.
function unityShowBanner(msg, type) {
function updateBannerVisibility() {
warningBanner.style.display = warningBanner.children.length ? 'block' : 'none';
}
var div = document.createElement('div');
div.innerHTML = msg;
warningBanner.appendChild(div);
if (type == 'error') div.style = 'background: red; padding: 10px;';
else {
if (type == 'warning') div.style = 'background: yellow; padding: 10px;';
setTimeout(function() {
warningBanner.removeChild(div);
updateBannerVisibility();
}, 5000);
}
updateBannerVisibility();
}
var buildUrl = "Build";
var loaderUrl = buildUrl + "/3d-test.loader.js";
var config = {
dataUrl: buildUrl + "/3d-test.data",
frameworkUrl: buildUrl + "/3d-test.framework.js",
codeUrl: buildUrl + "/3d-test.wasm",
streamingAssetsUrl: "StreamingAssets",
companyName: "DefaultCompany",
productName: "3d-test",
productVersion: "0.1",
showBanner: unityShowBanner,
};
// By default, Unity keeps WebGL canvas render target size matched with
// the DOM size of the canvas element (scaled by window.devicePixelRatio)
// Set this to false if you want to decouple this synchronization from
// happening inside the engine, and you would instead like to size up
// the canvas DOM size and WebGL render target sizes yourself.
// config.matchWebGLToCanvasSize = false;
if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
// Mobile device style: fill the whole browser client area with the game canvas:
var meta = document.createElement('meta');
meta.name = 'viewport';
meta.content = 'width=device-width, height=device-height, initial-scale=1.0, user-scalable=no, shrink-to-fit=yes';
document.getElementsByTagName('head')[0].appendChild(meta);
container.className = "unity-mobile";
canvas.className = "unity-mobile";
// To lower canvas resolution on mobile devices to gain some
// performance, uncomment the following line:
// config.devicePixelRatio = 1;
} else {
// Desktop style: Render the game canvas in a window that can be maximized to fullscreen:
canvas.style.width = "960px";
canvas.style.height = "600px";
}
loadingBar.style.display = "block";
var script = document.createElement("script");
script.src = loaderUrl;
script.onload = () => {
createUnityInstance(canvas, config, (progress) => {
progressBarFull.style.width = 100 * progress + "%";
}).then((unityInstance) => {
loadingBar.style.display = "none";
fullscreenButton.onclick = () => {
unityInstance.SetFullscreen(1);
};
}).catch((message) => {
alert(message);
});
};
document.body.appendChild(script);
</script>
</body>
</html>

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -1 +0,0 @@
423c70a9e25e9ab478ac7be79a97b828

View File

@ -1,2 +0,0 @@
m_EditorVersion: 2021.3.37f1
m_EditorVersionWithRevision: 2021.3.37f1 (3b6005ad5ad6)

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.3 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 175 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 96 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 109 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 74 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 84 B

View File

@ -1,16 +0,0 @@
body { padding: 0; margin: 0 }
#unity-container { position: absolute }
#unity-container.unity-desktop { left: 50%; top: 50%; transform: translate(-50%, -50%) }
#unity-container.unity-mobile { width: 100%; height: 100% }
#unity-canvas { background: #231F20 }
.unity-mobile #unity-canvas { width: 100%; height: 100% }
#unity-loading-bar { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: none }
#unity-logo { width: 154px; height: 130px; background: url('unity-logo-dark.png') no-repeat center }
#unity-progress-bar-empty { width: 141px; height: 18px; margin-top: 10px; margin-left: 6.5px; background: url('progress-bar-empty-dark.png') no-repeat center }
#unity-progress-bar-full { width: 0%; height: 18px; margin-top: 10px; background: url('progress-bar-full-dark.png') no-repeat center }
#unity-footer { position: relative }
.unity-mobile #unity-footer { display: none }
#unity-webgl-logo { float:left; width: 204px; height: 38px; background: url('webgl-logo.png') no-repeat center }
#unity-build-title { float: right; margin-right: 10px; line-height: 38px; font-family: arial; font-size: 18px }
#unity-fullscreen-button { float: right; width: 38px; height: 38px; background: url('fullscreen-button.png') no-repeat center }
#unity-warning { position: absolute; left: 50%; top: 5%; transform: translate(-50%); background: white; padding: 10px; display: none }

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.0 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.0 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.9 KiB

View File

@ -1,50 +0,0 @@
com.unity.barracuda@2.0.0
com.unity.burst@1.8.11
com.unity.cinemachine@2.8.9
com.unity.collab-proxy@2.3.1
com.unity.connect.share@4.2.3
com.unity.feature.development@1.0.1
com.unity.ide.rider@3.0.28
com.unity.ide.visualstudio@2.0.22
com.unity.ide.vscode@1.2.5
com.unity.learn.iet-framework@3.1.1
com.unity.ml-agents@2.0.1
com.unity.probuilder@5.2.2
com.unity.render-pipelines.universal@12.1.14
com.unity.test-framework@1.1.33
com.unity.textmeshpro@3.0.6
com.unity.timeline@1.6.5
com.unity.ugui@1.0.0
com.unity.visualscripting@1.9.2
com.unity.modules.ai@1.0.0
com.unity.modules.androidjni@1.0.0
com.unity.modules.animation@1.0.0
com.unity.modules.assetbundle@1.0.0
com.unity.modules.audio@1.0.0
com.unity.modules.cloth@1.0.0
com.unity.modules.director@1.0.0
com.unity.modules.imageconversion@1.0.0
com.unity.modules.imgui@1.0.0
com.unity.modules.jsonserialize@1.0.0
com.unity.modules.particlesystem@1.0.0
com.unity.modules.physics@1.0.0
com.unity.modules.physics2d@1.0.0
com.unity.modules.screencapture@1.0.0
com.unity.modules.terrain@1.0.0
com.unity.modules.terrainphysics@1.0.0
com.unity.modules.tilemap@1.0.0
com.unity.modules.ui@1.0.0
com.unity.modules.uielements@1.0.0
com.unity.modules.umbra@1.0.0
com.unity.modules.unityanalytics@1.0.0
com.unity.modules.unitywebrequest@1.0.0
com.unity.modules.unitywebrequestassetbundle@1.0.0
com.unity.modules.unitywebrequestaudio@1.0.0
com.unity.modules.unitywebrequesttexture@1.0.0
com.unity.modules.unitywebrequestwww@1.0.0
com.unity.modules.vehicles@1.0.0
com.unity.modules.video@1.0.0
com.unity.modules.vr@1.0.0
com.unity.modules.wind@1.0.0
com.unity.modules.xr@1.0.0
com.unity.template.kart@5.0.1

View File

@ -1,119 +0,0 @@
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Unity WebGL Player | KartRider</title>
<link rel="shortcut icon" href="TemplateData/favicon.ico">
<link rel="stylesheet" href="TemplateData/style.css">
</head>
<body>
<div id="unity-container" class="unity-desktop">
<canvas id="unity-canvas" width=960 height=600></canvas>
<div id="unity-loading-bar">
<div id="unity-logo"></div>
<div id="unity-progress-bar-empty">
<div id="unity-progress-bar-full"></div>
</div>
</div>
<div id="unity-warning"> </div>
<div id="unity-footer">
<div id="unity-webgl-logo"></div>
<div id="unity-fullscreen-button"></div>
<div id="unity-build-title">KartRider</div>
</div>
</div>
<script>
var container = document.querySelector("#unity-container");
var canvas = document.querySelector("#unity-canvas");
var loadingBar = document.querySelector("#unity-loading-bar");
var progressBarFull = document.querySelector("#unity-progress-bar-full");
var fullscreenButton = document.querySelector("#unity-fullscreen-button");
var warningBanner = document.querySelector("#unity-warning");
// Shows a temporary message banner/ribbon for a few seconds, or
// a permanent error message on top of the canvas if type=='error'.
// If type=='warning', a yellow highlight color is used.
// Modify or remove this function to customize the visually presented
// way that non-critical warnings and error messages are presented to the
// user.
function unityShowBanner(msg, type) {
function updateBannerVisibility() {
warningBanner.style.display = warningBanner.children.length ? 'block' : 'none';
}
var div = document.createElement('div');
div.innerHTML = msg;
warningBanner.appendChild(div);
if (type == 'error') div.style = 'background: red; padding: 10px;';
else {
if (type == 'warning') div.style = 'background: yellow; padding: 10px;';
setTimeout(function() {
warningBanner.removeChild(div);
updateBannerVisibility();
}, 5000);
}
updateBannerVisibility();
}
var buildUrl = "Build";
var loaderUrl = buildUrl + "/kartrider.loader.js";
var config = {
dataUrl: buildUrl + "/kartrider.data",
frameworkUrl: buildUrl + "/kartrider.framework.js",
codeUrl: buildUrl + "/kartrider.wasm",
streamingAssetsUrl: "StreamingAssets",
companyName: "DefaultCompany",
productName: "KartRider",
productVersion: "5.0.1",
showBanner: unityShowBanner,
};
// By default, Unity keeps WebGL canvas render target size matched with
// the DOM size of the canvas element (scaled by window.devicePixelRatio)
// Set this to false if you want to decouple this synchronization from
// happening inside the engine, and you would instead like to size up
// the canvas DOM size and WebGL render target sizes yourself.
// config.matchWebGLToCanvasSize = false;
if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
// Mobile device style: fill the whole browser client area with the game canvas:
var meta = document.createElement('meta');
meta.name = 'viewport';
meta.content = 'width=device-width, height=device-height, initial-scale=1.0, user-scalable=no, shrink-to-fit=yes';
document.getElementsByTagName('head')[0].appendChild(meta);
container.className = "unity-mobile";
canvas.className = "unity-mobile";
// To lower canvas resolution on mobile devices to gain some
// performance, uncomment the following line:
// config.devicePixelRatio = 1;
unityShowBanner('WebGL builds are not supported on mobile devices.');
} else {
// Desktop style: Render the game canvas in a window that can be maximized to fullscreen:
canvas.style.width = "960px";
canvas.style.height = "600px";
}
loadingBar.style.display = "block";
var script = document.createElement("script");
script.src = loaderUrl;
script.onload = () => {
createUnityInstance(canvas, config, (progress) => {
progressBarFull.style.width = 100 * progress + "%";
}).then((unityInstance) => {
loadingBar.style.display = "none";
fullscreenButton.onclick = () => {
unityInstance.SetFullscreen(1);
};
}).catch((message) => {
alert(message);
});
};
document.body.appendChild(script);
</script>
</body>
</html>

791
yarn.lock

File diff suppressed because it is too large Load Diff