Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/rimurudev/unity-react-webgl-clicker
React Unity WebGL | Запуск Unity проекта на React + простой обмен данными
https://github.com/rimurudev/unity-react-webgl-clicker
js json react react-native reactjs rimuru-dev rimurudev typescript unity-json unity-react unity-react-webgl unity-web unity-webgl webgl
Last synced: 6 days ago
JSON representation
React Unity WebGL | Запуск Unity проекта на React + простой обмен данными
- Host: GitHub
- URL: https://github.com/rimurudev/unity-react-webgl-clicker
- Owner: RimuruDev
- License: mit
- Created: 2024-06-28T20:09:29.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2024-06-29T08:55:08.000Z (5 months ago)
- Last Synced: 2024-06-29T21:44:56.254Z (5 months ago)
- Topics: js, json, react, react-native, reactjs, rimuru-dev, rimurudev, typescript, unity-json, unity-react, unity-react-webgl, unity-web, unity-webgl, webgl
- Language: ShaderLab
- Homepage:
- Size: 6.31 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Пометка на память
## Создание WEBGL игры с интеграцией React и Unity
### Шаги по установке и созданию проекта
1. Создаем новый проект React:
```bash
npx create-react-app react-project
```
2. Переходим в папку проекта:
```bash
cd react-project
```
3. Устанавливаем библиотеку для интеграции Unity в React:
```bash
npm install react-unity-webgl
```
4. Собираем билд Unity и переносим его в папку `public/UnityBuild`. В моем случае проект называется `Clicker`.
5. Создаем файл `App.js` в папке `src` и файл `UnityApp.js` в папке `src`.
### Пример файла `App.js`
```javascript
import React from 'react';
import UnityApp from './UnityApp';
function App() {
return (
);
}
export default App;
```
### Пример файла `UnityApp.js`
```javascript
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 ;
}
export default UnityApp;
```
6. Запускаем проект:
```bash
npm start
```
7. Открываем в браузере:
```
http://localhost:3000/
```
---
## Тестирование проекта
Если вы хотите протестировать этот проект, выполните следующие шаги:
1. **Установите Node.js**:
Если у вас нет Node.js, скачайте и установите его с [официального сайта](https://nodejs.org/).
2. **Склонируйте репозиторий**:
```bash
git clone https://github.com/RimuruDev/Unity-React-WEBGL-Clicker.git
```
3. **Перейдите в папку с проектом React**:
```bash
cd Unity-React-WEBGL-Clicker/react-project
```
4. **Установите зависимости**:
```bash
npm install
```
5. **Запустите проект**:
```bash
npm start
```
6. **Откройте проект в браузере**:
Откройте браузер и перейдите по адресу:
```
http://localhost:3000/
```
Теперь вы можете увидеть работу интеграции Unity и React в действии. Если у вас возникнут вопросы или проблемы, пожалуйста, создайте issue в репозитории.