{"id":19704231,"url":"https://github.com/rimurudev/unity-react-webgl-clicker","last_synced_at":"2025-04-29T14:31:15.978Z","repository":{"id":246586290,"uuid":"821554133","full_name":"RimuruDev/Unity-React-WEBGL-Clicker","owner":"RimuruDev","description":"React Unity WebGL | Запуск Unity проекта на React + простой обмен данными","archived":false,"fork":false,"pushed_at":"2024-06-29T08:55:08.000Z","size":6620,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-05T17:51:13.526Z","etag":null,"topics":["js","json","react","react-native","reactjs","rimuru-dev","rimurudev","typescript","unity-json","unity-react","unity-react-webgl","unity-web","unity-webgl","webgl"],"latest_commit_sha":null,"homepage":"","language":"ShaderLab","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/RimuruDev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-06-28T20:09:29.000Z","updated_at":"2025-01-09T07:47:09.000Z","dependencies_parsed_at":"2024-11-11T21:32:07.414Z","dependency_job_id":null,"html_url":"https://github.com/RimuruDev/Unity-React-WEBGL-Clicker","commit_stats":null,"previous_names":["rimurudev/unity-react-webgl-clicker"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RimuruDev%2FUnity-React-WEBGL-Clicker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RimuruDev%2FUnity-React-WEBGL-Clicker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RimuruDev%2FUnity-React-WEBGL-Clicker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RimuruDev%2FUnity-React-WEBGL-Clicker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/RimuruDev","download_url":"https://codeload.github.com/RimuruDev/Unity-React-WEBGL-Clicker/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251518983,"owners_count":21602244,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["js","json","react","react-native","reactjs","rimuru-dev","rimurudev","typescript","unity-json","unity-react","unity-react-webgl","unity-web","unity-webgl","webgl"],"created_at":"2024-11-11T21:21:17.559Z","updated_at":"2025-04-29T14:31:10.944Z","avatar_url":"https://github.com/RimuruDev.png","language":"ShaderLab","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Пометка на память\n\n## Создание WEBGL игры с интеграцией React и Unity\n\n### Шаги по установке и созданию проекта\n\n1. Создаем новый проект React:\n   ```bash\n   npx create-react-app react-project\n   ```\n\n2. Переходим в папку проекта:\n   ```bash\n   cd react-project\n   ```\n\n3. Устанавливаем библиотеку для интеграции Unity в React:\n   ```bash\n   npm install react-unity-webgl\n   ```\n\n4. Собираем билд Unity и переносим его в папку `public/UnityBuild`. В моем случае проект называется `Clicker`.\n\n5. Создаем файл `App.js` в папке `src` и файл `UnityApp.js` в папке `src`.\n\n### Пример файла `App.js`\n\n```javascript\nimport React from 'react';\nimport UnityApp from './UnityApp';\n\nfunction App() {\n    return (\n        \u003cdiv className=\"App\"\u003e\n            \u003cUnityApp /\u003e\n        \u003c/div\u003e\n    );\n}\n\nexport default App;\n```\n\n### Пример файла `UnityApp.js`\n\n```javascript\nimport React, { useEffect } from 'react';\nimport { Unity, useUnityContext } from \"react-unity-webgl\";\n\nfunction UnityApp() {\n    const { unityProvider, sendMessage } = useUnityContext({\n        loaderUrl: \"UnityBuild/Build/Clicker.loader.js\",\n        dataUrl: \"UnityBuild/Build/Clicker.data.unityweb\",\n        frameworkUrl: \"UnityBuild/Build/Clicker.framework.js.unityweb\",\n        codeUrl: \"UnityBuild/Build/Clicker.wasm.unityweb\",\n    });\n\n    useEffect(() =\u003e {\n        const user = {\n            user_id: \"666\",\n            user_name: \"Rimuru Dev\"\n        };\n\n        console.log(\"Sending user data:\", JSON.stringify(user));\n\n        sendMessage(\"UserDataHandler\", \"ReceiveUserData\", JSON.stringify(user));\n    }, [sendMessage]);\n\n    useEffect(() =\u003e {\n        window.UnityToReact = (message) =\u003e {\n            console.log(\"Received from Unity: \", message);\n        };\n\n        return () =\u003e {\n            delete window.UnityToReact;\n        };\n    }, []);\n\n    return \u003cUnity unityProvider={unityProvider} style={{ width: \"800px\", height: \"600px\" }} /\u003e;\n}\n\nexport default UnityApp;\n```\n\n6. Запускаем проект:\n   ```bash\n   npm start\n   ```\n\n7. Открываем в браузере:\n   ```\n   http://localhost:3000/\n\n   ```\n---\n\n## Тестирование проекта\n\nЕсли вы хотите протестировать этот проект, выполните следующие шаги:\n\n1. **Установите Node.js**:\n   Если у вас нет Node.js, скачайте и установите его с [официального сайта](https://nodejs.org/).\n\n2. **Склонируйте репозиторий**:\n   ```bash\n   git clone https://github.com/RimuruDev/Unity-React-WEBGL-Clicker.git\n   ```\n\n3. **Перейдите в папку с проектом React**:\n   ```bash\n   cd Unity-React-WEBGL-Clicker/react-project\n   ```\n\n4. **Установите зависимости**:\n   ```bash\n   npm install\n   ```\n\n5. **Запустите проект**:\n   ```bash\n   npm start\n   ```\n\n6. **Откройте проект в браузере**:\n   Откройте браузер и перейдите по адресу:\n   ```\n   http://localhost:3000/\n   ```\n\nТеперь вы можете увидеть работу интеграции Unity и React в действии. Если у вас возникнут вопросы или проблемы, пожалуйста, создайте issue в репозитории.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frimurudev%2Funity-react-webgl-clicker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frimurudev%2Funity-react-webgl-clicker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frimurudev%2Funity-react-webgl-clicker/lists"}