Unity2020.3 WebGL与Web通讯（html5和Vue）

<!DOCTYPE html><html lang="en-us"><head><meta charset="utf-8"><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Unity WebGL Player | xxx<

未来之幸

3087人浏览 · 2021-08-23 16:06:10

未来之幸 · 2021-08-23 16:06:10 发布

<!DOCTYPE html>
<html lang="en-us">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Unity WebGL Player | xxx</title>
    <link rel="shortcut icon" href="TemplateData/favicon.ico">
    <link rel="stylesheet" href="TemplateData/style.css">
  </head>
  <body>
    <div id="unity-container" class="unity-desktop">
      <canvas id="unity-canvas" width=1920 height=1080></canvas>
      <div id="unity-loading-bar">
        <div id="unity-logo"></div>
        <div id="unity-progress-bar-empty">
          <div id="unity-progress-bar-full"></div>
        </div>
      </div>
      <div id="unity-mobile-warning">
        WebGL builds are not supported on mobile devices.
      </div>
      <div id="unity-footer">
        <div id="unity-webgl-logo"></div>
        <div id="unity-fullscreen-button"></div>
        <div id="unity-build-title">SgUCore</div>
      </div>
    </div>
    <script>
      const gameInstance = null
      var buildUrl = "Build";
      var loaderUrl = buildUrl + "/bin.loader.js";
      var config = {
        dataUrl: buildUrl + "/bin.data",
        frameworkUrl: buildUrl + "/bin.framework.js",
        codeUrl: buildUrl + "/bin.wasm",
        streamingAssetsUrl: "StreamingAssets",
        companyName: "DefaultCompany",
        productName: "xxx",
        productVersion: "0.1",
      };

      var container = document.querySelector("#unity-container");
      var canvas = document.querySelector("#unity-canvas");
      var loadingBar = document.querySelector("#unity-loading-bar");
      var progressBarFull = document.querySelector("#unity-progress-bar-full");
      var fullscreenButton = document.querySelector("#unity-fullscreen-button");
      var mobileWarning = document.querySelector("#unity-mobile-warning");

      // By default Unity keeps WebGL canvas render target size matched with
      // the DOM size of the canvas element (scaled by window.devicePixelRatio)
      // Set this to false if you want to decouple this synchronization from
      // happening inside the engine, and you would instead like to size up
      // the canvas DOM size and WebGL render target sizes yourself.
      // config.matchWebGLToCanvasSize = false;

      if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
        container.className = "unity-mobile";
        // Avoid draining fillrate performance on mobile devices,
        // and default/override low DPI mode on mobile browsers.
        config.devicePixelRatio = 1;
        mobileWarning.style.display = "block";
        setTimeout(() => {
          mobileWarning.style.display = "none";
        }, 5000);
      } else {
        canvas.style.width = "960px";
        canvas.style.height = "600px";
      }
      loadingBar.style.display = "block";

      var script = document.createElement("script");
      script.src = loaderUrl;
      script.onload = () => {
        createUnityInstance(canvas, config, (progress) => {
          progressBarFull.style.width = 100 * progress + "%";
        }).then((unityInstance) => {
          loadingBar.style.display = "none";
          fullscreenButton.onclick = () => {
            unityInstance.SetFullscreen(1);
          };
          this.gameInstance = unityInstance
        }).catch((message) => {
          alert(message);
        });
      };
      document.body.appendChild(script);

      function message(gameObject, method, param) {
          if (param === null) {
            param = ''
          }
          if (this.gameInstance !== null) {
            this.gameInstance.SendMessage(gameObject, method, param)
            console.log(method)
          } else {
            console.warn(
              "vue-unity-webgl: you've sent a message to the Unity content, but it wasn\t instantiated yet."
            )
          }
        }
      window.ReportReady = function(eventName,arr){
        var initD = {detail:{"hazcheeseburger":true},bubbles: true, cancelable: true, composed: true}
        var evt = new CustomEvent(eventName, initD)
        window.top.dispatchEvent(evt)
        console.log(eventName)
      }
    </script>
  </body>
</html>

这是unity打包webgl的修改版index.html

添加内容如下

<script>
//全局
const gameInstance = null

script.onload = () => {
        createUnityInstance(canvas, config, (progress) => {
          progressBarFull.style.width = 100 * progress + "%";
        }).then((unityInstance) => {
          loadingBar.style.display = "none";
          fullscreenButton.onclick = () => {
            unityInstance.SetFullscreen(1);
          };
          //获取unity实例
          this.gameInstance = unityInstance
        }).catch((message) => {
          alert(message);
        });
      };
//web发消息到unity
function message(gameObject, method, param) {
          if (param === null) {
            param = ''
          }
          if (this.gameInstance !== null) {
            this.gameInstance.SendMessage(gameObject, method, param)
            console.log(method)
          } else {
            console.warn(
              "vue-unity-webgl: you've sent a message to the Unity content, but it wasn\t             
                 instantiated yet."
            )
          }
        }
//接受unity发送的消息并广播消息
window.ReportReady = function(eventName,arr){
        var initD = {detail:{"hazcheeseburger":true},bubbles: true, cancelable: true,                             
                      composed: true}
        var evt = new CustomEvent(eventName, initD)
        //广播unity发出的事件
        window.top.dispatchEvent(evt)
        console.log(eventName)
      }
</script>

jslib文件

mergeInto(LibraryManager.library, {

  webMessage: function (eventName, arr){

    window.ReportReady(Pointer_stringify(eventName), Pointer_stringify(arr))
  }
});

html5调用untiywebgl，插入如下语句

<iframe id = "iframe" src="SaveLoad/Unity.html" width="1920" height="1080" webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen="true" frameborder="0"></iframe>

//调用函数发消息给unity
var iframe = document.getElementById("iframe")
iframe.contentWindow.message('Cube', 'GetBase64', base64Str)

//监听unity发来的消息 （unityEvent 由unity发送函数定义）
window.addEventListener('unityEvent', this.uinityEvent, false)

如果vue想使用unitywebgl，插入如下语句

--src可以填相对路径也可使完整url链接 
<iframe ref = "iframe" src="web/Unity.html" width="1920" height="1080" webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen="true" frameborder="0"></iframe>

--调用发消息函数向unity发消息
this.$refs.iframe.contentWindow.message('Canvas', 'ShowFloor', 2)

--监听unity发出的由window.ReportReady广播的事件，（unityEvent 由unity发送函数定义）
 mounted () {
    window.addEventListener('unityEvent', this.uinityEvent, false)
  }

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^