javascript 为什么Unity WebGL无法在我的React网站上运行?

t98cgbkg  于 2023-04-28  发布在  Java
关注(0)|答案(1)|浏览(129)

我一直在尝试使用React Unity WebGL在我的网站内导入Unity游戏。我看了很多教程和视频,我似乎有正确的代码,但是,游戏没有显示在我的网站上(图像附加的代码和网站)。有谁知道我做错了什么,我该如何改正?
[My game.tsx文件,我在我的游戏中使用。js文件]
https://i.stack.imgur.com/fWknb.png
[My Game.js文件]
https://i.stack.imgur.com/10dFe.png

kyvafyod

kyvafyod1#

你不创建游戏的示例。您应该从Unity加载器脚本(“Build.loader.js”为您的游戏)。
要解决这个问题,您可以使用iframe和加载索引。html或创建自己的加载程序。例如,对于loader,您可以使用Unity最小WebGL模板代码:

<canvas id="unity-canvas" width=960 height=600 tabindex="-1" style="width: 960px; height: 600px; background: #231F20"></canvas>
<script src="Build/html5.loader.js"></script>
<script>
  if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
    // Mobile device style: fill the whole browser client area with the game canvas:
    var meta = document.createElement('meta');
    meta.name = 'viewport';
    meta.content = 'width=device-width, height=device-height, initial-scale=1.0, user-scalable=no, shrink-to-fit=yes';
    document.getElementsByTagName('head')[0].appendChild(meta);

    var canvas = document.querySelector("#unity-canvas");
    canvas.style.width = "100%";
    canvas.style.height = "100%";
    canvas.style.position = "fixed";

    document.body.style.textAlign = "left";
  }

  createUnityInstance(document.querySelector("#unity-canvas"), {
    dataUrl: "Build/html5.data",
    frameworkUrl: "Build/html5.framework.js",
    codeUrl: "Build/html5.wasm",
    streamingAssetsUrl: "StreamingAssets",
    companyName: "Test",
    productName: "test",
    productVersion: "0.1",
    // matchWebGLToCanvasSize: false, // Uncomment this to separately control WebGL canvas render size and DOM element size.
    // devicePixelRatio: 1, // Uncomment this to override low DPI rendering on high DPI displays.
  });
</script>

相关问题