reactjs - 如何让我的 ReactJS 项目显示 Unity 3D 游戏？我试过反应统一 WEBGL

Question

我刚刚用 Unity 上的 Virtual Tour 完成了一个网站的编码，我已将其导出为 WEBGL，并禁用了压缩格式，并关闭了解压缩回退（Unity）。然后将此添加到我在 React 上的代码中

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

const unityContext = new UnityContext({
  loaderUrl: "../Build/unity341.loader.js",
  dataUrl: "../Build/unity341.data",
  frameworkUrl: "../Build/unity.framework.js",
  codeUrl: "../Build/unity341.wasm",
});

function Game() {
    return <Unity unityContext={unityContext} />;
  }

  export default Game; 

然后在页面上导入游戏

import React, {Component} from 'react';
import Game from './game.jsx';
import {Container} from 'react-bootstrap';

class GamePage extends Component {
render() {
return ( 
  <div>
    <Game/>
  <Container>
//text and stuff inside the container
</Container>
</div>
);
}
}


export default GamePage;

但是当我在我的本地主机上渲染它时，我没有得到 Unity 查看器，并且在 Chrome 上检查时，我唯一看到的游戏应该是以下标签

<canvas class>

谢谢你们的帮助！

标签： reactjsunity3d

Answer 1

将生成WebGL files的Build文件public夹放入反应中。见图片。这些文件必须在公共文件夹中，因为反应服务器在此文件夹中托管静态文件。例如，我已将它们放入public\build文件夹。见图片。

反应中的代码：

const unityContext = new UnityContext({
    loaderUrl: 'build/<AppName>.loader.js',
    dataUrl: 'build/<AppName>.data',
    frameworkUrl: 'build/<AppName>.framework.js',
    codeUrl: 'build/<AppName>.wasm',
});

<Unity unityContext={unityContext} style={{ width: '100%', height: '100%' }} />