-
Создаем новый проект React:
npx create-react-app react-project
-
Переходим в папку проекта:
cd react-project
-
Устанавливаем библиотеку для интеграции Unity в React:
npm install react-unity-webgl
-
Собираем билд Unity и переносим его в папку
public/UnityBuild
. В моем случае проект называетсяClicker
. -
Создаем файл
App.js
в папкеsrc
и файлUnityApp.js
в папкеsrc
.
import React from 'react';
import UnityApp from './UnityApp';
function App() {
return (
<div className="App">
<UnityApp />
</div>
);
}
export default App;
import React, { useEffect } from 'react';
import { Unity, useUnityContext } from "react-unity-webgl";
function UnityApp() {
const { unityProvider, sendMessage } = useUnityContext({
loaderUrl: "UnityBuild/Build/Clicker.loader.js",
dataUrl: "UnityBuild/Build/Clicker.data.unityweb",
frameworkUrl: "UnityBuild/Build/Clicker.framework.js.unityweb",
codeUrl: "UnityBuild/Build/Clicker.wasm.unityweb",
});
useEffect(() => {
const user = {
user_id: "666",
user_name: "Rimuru Dev"
};
console.log("Sending user data:", JSON.stringify(user));
sendMessage("UserDataHandler", "ReceiveUserData", JSON.stringify(user));
}, [sendMessage]);
useEffect(() => {
window.UnityToReact = (message) => {
console.log("Received from Unity: ", message);
};
return () => {
delete window.UnityToReact;
};
}, []);
return <Unity unityProvider={unityProvider} style={{ width: "800px", height: "600px" }} />;
}
export default UnityApp;
-
Запускаем проект:
npm start
-
Открываем в браузере:
http://localhost:3000/
Если вы хотите протестировать этот проект, выполните следующие шаги:
-
Установите Node.js: Если у вас нет Node.js, скачайте и установите его с официального сайта.
-
Склонируйте репозиторий:
git clone https://github.com/RimuruDev/Unity-React-WEBGL-Clicker.git
-
Перейдите в папку с проектом React:
cd Unity-React-WEBGL-Clicker/react-project
-
Установите зависимости:
npm install
-
Запустите проект:
npm start
-
Откройте проект в браузере: Откройте браузер и перейдите по адресу:
http://localhost:3000/
Теперь вы можете увидеть работу интеграции Unity и React в действии. Если у вас возникнут вопросы или проблемы, пожалуйста, создайте issue в репозитории.