在 React 项目中导入 Unity 文件答案

【问题标题】：Import Unity file in React project在 React 项目中导入 Unity 文件
【发布时间】：2017-12-23 12:00:59
【问题描述】：

我在我的React 项目中加载Unity 文件时遇到问题。我想如果我在index.html 中添加文件，我将能够在项目的任何地方使用UnityLoader，如下所示：

index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Game</title>
  </head>
  <body>
    <div id="app">
    </div>
    <script src="UnityLoader.js"></script>
  </body>
</html>

Unity.js

class Unity extends Component {

    render() {
        return (
            <div id="unity">
                {UnityLoader.instantiate('unity', 'unity/index.html')}
            </div>
        );
    }
}

但是，我收到一条错误消息，提示 UnityLoader 未定义。

我需要使用某种方式

import { UnityLoader } from 'UnityLoader'

在Unity.js?问题是UnityLoader是一个外部JS文件，并没有导出任何东西。

【问题讨论】：

标签： javascript reactjs unity3d src

【解决方案1】：

为什么不通过 npm 安装 React-Unity 然后将其导入到您的组件中？

import React, { Component } from 'react';
import { Unity } from 'react-unity-webgl';


export class App extends Component {
  render() {
    return (<div className="app">
      <Unity src="Build/myGame.json" />
        </div>)
    }
}

不要忘记添加一个脚本标签来加载 UnityLoader.js 文件，该文件由 Unity 在您的基本 html 文件中导出。

<script src="build_unity/Build/UnityLoader.js"></script> 
<script src="compiled/bundle.js"></script>

【讨论】：

我想过，但不确定它有多可靠。但我想这是最有意义的。谢谢
我希望它有效。还有另一个统一的 npm 包。但我相信这是让它发挥作用的方法。
我在第二步加载 UnityLoader 时遇到问题。我正在使用 Create-react-app 并尝试将 <script src="relativePathToUnityLoader></script> 添加到 public/index.html。但也许这是错误的文件？因为它仍然说：React-Unity-Webgl error:The UnityLoader was not defined...。我还尝试在 .js 文件中执行常规的import "relativePathToUnityLoader";。这反而给了我'webAssembly' is not defined, unexpected use of screen 等等