大家好，很高兴又见面了，我是"高级前端进阶"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发!

1.什么是 React Unity WebGL

当将 Unity 应用程序引入 Web 时，可能需要与网页上的组件进行通信、构建交互式界面，或者可能希望使用 Unity 未公开的 Web API 来实现功能，而将 Unity 与 React 相结合是实现这些目标的好方法。 React Unity WebGL 提供了一种现代解决方案，用于将 Unity WebGL 构建嵌入到 React 应用程序中，同时为 Unity 和 React 之间的双向通信和交互提供高级 API。

目前已经有超过数十万的安装和数千个开源项目，通过使用 React Unity WebGL 将游戏带到 Web 上为游戏添加另一层交互性。 典型的项目包括：

SolaJump：区块链中最简单的获胜游戏 SolaJumper NFT 是 10,000 个通过算法生成的独特收藏品。 以 1.2 SOL 铸造您的 Solajumper NFT，并在 Genesis 锦标赛中获得 10 条生命。可以访问这里：https://solajump.com/Asgaard Saga：是一个供孩子探索的治疗计划， 已经为孩子开发了一个自己的游戏世界。 节目中讨论的治疗原则基于最新的科学见解和多年的实践经验。可以打开网页访问：https://asgaard-saga.nl/Magic Microwave：是一个集体艺术项目、游戏工作室、游戏平台、互联的元界门户和社区。 其成立的明确希望和目标是抵消、扭转现代世界的不愉快方面，成为元宇宙中不糟糕的前哨基地。可以访问网站：https://magicmicrowave.xyz/

目前 React Unity WebGL 在 Github 通过 MIT 协议开源，有超过 1.6k 的 star、2.4k 的项目依赖量，是一个值得关注的前端开源项目。

2.如何使用 React Unity WebGL2.1 安装 React Unity WebGL

首先使用 JavaScript 或 TypeScript React 项目中的 Node Package Manager 或 Yarn 安装 React Unity WebGL。 如果还没有 React 项目，建议使用 Vite React 模板立即开始。

// npm 7+, extra double-dash is needed:npm create vite@latest my-vue-app -- --template vue// yarnyarn create vite my-vue-app --template vue// pnpmpnpm create vite my-vue-app --template vue// bunbunx create-vite my-vue-app --template vue

在安装模块之前，请确保安装的版本与构建的 Unity 版本兼容。 当新的 Unity 版本发布时尽快更新模块以保持最新的兼容性。

React 版本 >= 16.8.0 或更高版本Unity 版本 >=2020.1.0 或以上。如果使用的是不支持 WebAssemly 的旧版本 Unity，则需要使用版本 9 之前的模块版本。npm install react-unity-webgl

Web 和 Unity 正在快速发展，为了跟上这些变化，React Unity WebGL 模块也必须适应，同时保持模块快速、轻量级和兼容。 从模块版本 9 开始，不再支持使用 2020 年之前的 Unity 版本进行的构建。 如果使用的是旧版本的 Unity，或者必须维护使用旧版本模块构建的项目，则可以使用 React Unity WebGL 的旧版本之一。 不过，建议将项目更新到较新版本的 Unity，以便使用 React Unity WebGL 的所有最新功能。

2.2 使用 React Unity WebGL

下面是一个基本示例，展示如何在 React 应用程序中嵌入 Unity WebGL 构建。

import React from "react";import {Unity, useUnityContext} from "react-unity-webgl";function App() { const {unityProvider} = useUnityContext({ loaderUrl: "build/myunityapp.loader.js", dataUrl: "build/myunityapp.data", frameworkUrl: "build/myunityapp.framework.js", codeUrl: "build/myunityapp.wasm", }); return <Unity unityProvider={unityProvider} />;}

以下示例展示如何使用 Unity Context 提供加载状态的示例。

import React from "react";import {Unity, useUnityContext} from "react-unity-webgl";function App() { const {unityProvider, loadingProgression, isLoaded} = useUnityContext({ loaderUrl: "build/myunityapp.loader.js", dataUrl: "build/myunityapp.data", frameworkUrl: "build/myunityapp.framework.js", codeUrl: "build/myunityapp.wasm", }); return ( <Fragment> {!isLoaded && ( <p>Loading Application... {Math.round(loadingProgression * 100)}%</p> )} <Unity unityProvider={unityProvider} style={{visibility: isLoaded ? "visible" : "hidden"}} /> </Fragment> );}

下面是一个高级示例，展示如何使用 Unity 上下文在 Unity 和 React 之间进行通信。

import React, {Fragment} from "react";import {Unity, useUnityContext} from "react-unity-webgl";function App() { const [isGameOver, setIsGameOver] = useState(false); const [userName, setUserName] = useState(); const [score, setScore] = useState(); const {unityProvider, sendMessage, addEventListener, removeEventListener} = useUnityContext({ loaderUrl: "build/myunityapp.loader.js", dataUrl: "build/myunityapp.data", frameworkUrl: "build/myunityapp.framework.js", codeUrl: "build/myunityapp.wasm", }); const handleGameOver = useCallback((userName, score) => { setIsGameOver(true); setUserName(userName); setScore(score); }, []); useEffect(() => { addEventListener("GameOver", handleGameOver); return () => { removeEventListener("GameOver", handleGameOver); }; }, [addEventListener, removeEventListener, handleGameOver]); function handleClickSpawnEnemies() { sendMessage("GameController", "SpawnEnemies", 100); } return ( <Fragment> <Unity unityProvider={unityProvider} /> <button onClick={handleClickSpawnEnemies}>Spawn Enemies</button> {isGameOver === true && ( <p>{`Game Over ${userName}! You've scored ${score} points.`}</p> )} </Fragment> );}3.本文总结

本文主要和大家介绍 React Unity WebGL，其提供了一种现代解决方案，用于将 Unity WebGL 构建嵌入到 React 应用程序中，同时为 Unity 和 React 之间的双向通信和交互提供高级 API。因为篇幅问题，关于 React Unity WebGL 只是做了一个简短的介绍，但是文末的参考资料提供了大量优秀文档以供学习，如果有兴趣可以自行阅读。如果大家有什么疑问欢迎在评论区留言。

参考资料

https://github.com/jeffreylanters/react-unity-webgl

https://react-unity-webgl.dev/docs/api/send-message

https://react-unity-webgl.dev/

https://forum.unity.com/threads/calling-unity-script-function-from-javascript.1092583/

https://www.youtube.com/watch?v=-QufL5F9-ng

https://vitejs.dev/guide/