由浅入深解析如何将Unity项目完美嵌入React项目并实现通信！

2024-01-01 03:56:17





## 前言

Unity作为一款功能强大的跨平台游戏引擎，拥有众多特色优势，而React则是一款强大的前端库。许多开发人员希望将二者有机结合，以充分发挥各自优势。然而，这一过程却并不简单。本文将以Unity2020.3版本为例，详细地讲解如何将Unity项目打包成WebGL资源并导入到React项目中，并逐步实现通信。

## 打包Unity项目

首先，我们需要将Unity项目打包成WebGL资源。

1. 在Unity编辑器中，单击“文件”>“构建设置”。
2. 在“构建设置”窗口中，选择“WebGL”作为平台。
3. 单击“构建”。
4. 在“构建”窗口中，选择要构建的场景。
5. 单击“构建”。

Unity将开始打包项目。打包完成后，会在项目目录中生成一个WebGL文件夹。

## 导入Unity项目

接下来，我们需要将WebGL文件夹导入到React项目中。

1. 在React项目中，创建一个名为“unity”的新文件夹。
2. 将WebGL文件夹复制到“unity”文件夹中。
3. 在React项目中，安装`react-unity-webgl`包。

npm install react-unity-webgl


4. 在React项目中，创建一个名为“UnityApp.js”的新文件。

```javascript
import React, { useEffect, useRef } from 'react';
import Unity, { UnityContext } from 'react-unity-webgl';

const UnityApp = () => {
  const unityRef = useRef();

  useEffect(() => {
    const unityInstance = unityRef.current.GetComponentInChildren('UnityCanvas');
    unityInstance.SendMessage('Main Camera', 'OnMessageReceived', 'Hello from React!');
  }, []);

  return (
    <UnityContext ref={unityRef} src="./unity/Build/WebGL/index.html" />
  );
};

export default UnityApp;

在React项目中，创建一个名为“index.js”的新文件。

import React from 'react';
import ReactDOM from 'react-dom';
import UnityApp from './UnityApp';

ReactDOM.render(<UnityApp />, document.getElementById('root'));

实现通信

现在，我们需要实现Unity项目与React项目之间的通信。

在Unity项目中，创建一个名为“Main Camera”的新脚本。
在“Main Camera”脚本中，添加以下代码：

using UnityEngine;
using System;

public class MainCamera : MonoBehaviour
{
    public void OnMessageReceived(string message)
    {
        Debug.Log(message);
    }
}

在Unity项目中，将“Main Camera”脚本附加到主摄像机对象上。
在React项目中，在“UnityApp.js”文件中，添加以下代码：

const unityRef = useRef();

useEffect(() => {
  const unityInstance = unityRef.current.GetComponentInChildren('UnityCanvas');
  unityInstance.SendMessage('Main Camera', 'OnMessageReceived', 'Hello from React!');
}, []);

在React项目中，在“index.js”文件中，添加以下代码：

import React from 'react';
import ReactDOM from 'react-dom';
import UnityApp from './UnityApp';

ReactDOM.render(<UnityApp />, document.getElementById('root'));