React JS项目上的React Unity WebGL无法工作。

Question

你好，我正在尝试将 Unity WebGL 导出文件导入我的 React JS 项目中，但不知何故无法工作。我正在使用以下版本的React Unity WebGL（react-unity-webgl@7.x # For Unity 2018 and 2019 (Active LTS)），并且根据我正在使用的版本按照说明进行操作。有人遇到了和我一样的问题，并在GitHub上提出了一个问题，我按照他们说的做了，也就是把 unity 文件夹放在 public 文件夹里，但仍然无法正常工作。有人有任何想法如何解决这个问题吗？

这是我的文件夹结构：

以下是我尝试过的两种代码（它们基本相同）：

代码 A：

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

let unityContent = new UnityContent(
  "Megaman/Build/Megaman.json",
  "Megaman/Build/UnityLoader.js"
);

function MegamanGame() {
    return (
        <div>
          <h1>Is not working</h1>
          <Unity unityContent={unityContent} />
        </div>
      
    )
}

export default MegamanGame

代码B：

import Unity, { UnityContent } from "react-unity-webgl";
export default function Megaman() {
    let unityContent = new UnityContent(
        "Megaman/Build/Megaman.json",
        "Megaman/Build/UnityLoader.js"
    );
    return (
        <div><Unity unityContent={unityContent} /></div>
    );
}

以下是它的呈现方式

请注意，我已经尝试了两种路径："Megaman/Build/Megaman.json" 或者只有 "/Build/Megaman.json"

- ReactPotato

---

你解决了这个问题吗？考虑自我回答，并在下面编写一个答案。 - Ruzihm

Answer 1

回答链接：https://github.com/jeffreylanters/react-unity-webgl/discussions/299

代码没问题，只需要添加 "/Megaman/Build/Megaman.json" 和 "/Megaman/Build/UnityLoader.js"。

请注意，从7.x版本到8.x版本，“UnityContent”已经被重命名为 “UnityContext”。

- Dean Overton

Answer 2

你需要将UnityBuild文件夹移动到Public文件夹的子文件夹中，路径应为 /public/Build/yourfiles.json。

移动后我遇到了一些问题，在本地主机上运行得很好，但在托管网站上构建时无法加载。

- Lucilo del Castillo

---

目前您的回答不够清晰。请进行[编辑]以添加更多细节，帮助他人理解如何解决所提出的问题。您可以在帮助中心了解有关如何撰写好答案的更多信息。 - Community

开发者告诉我，它不一定是“/public/Build/yourfiles.json”，只要路由/路径正确，它就可以工作，并且确实如此。在我的代码中，页面在SRC中，构建在公共文件夹中，但是这是我必须编写的方式：“/Megaman/Build/Megaman.json”，因为我在公共文件夹中创建了另一个文件夹（这样我就可以分离我想要添加的多个游戏）。 - ReactPotato

啊，当然了...如果你有更多的文件夹，你必须在路径中添加它们，但我的意思是项目文件夹必须在公共文件夹内。很高兴它起作用了。 - Lucilo del Castillo