unity发布webgl,修改UI,调用js代码

于 2025-05-06 16:23:02 发布
阅读量933 收藏 28
点赞数 18
文章标签： unity webgl ui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_38450311/article/details/147740707
版权

unity打包webgl默认努力呀
文件夹结构

1不包含index_c3840.html 以及main.cs

替换UI

进入到webgl\TemplateData 文件夹下

1.修改style.css

如下

.webgl-content * {border: 0; margin: 0; padding: 0}
.webgl-content {position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}

.webgl-content .logo, .progress {position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
.webgl-content .progress {height: 38px; width: 280px; margin-top: 90px;}
.webgl-content .progress .empty {background: url('progressEmpty.Light.png') no-repeat right / cover; float: right; width: 100%; height: 100%; display: inline-block;}
.webgl-content .progress .full {background: url('progressFull.Light.png') no-repeat left / cover; float: left; width: 0%; height: 100%; display: inline-block;}

.webgl-content .progress.Dark .empty {background-image: url('progressEmpty.Dark.png');}
.webgl-content .progress.Dark .full {background-image: url('progressFull.Dark.png');}

.webgl-content .footer {margin-top: 5px; height: 38px; line-height: 38px; font-family: Helvetica, Verdana, Arial, sans-serif; font-size: 18px;}
.webgl-content .footer .webgl-logo, .title, .fullscreen {height: 100%; display: inline-block; background: transparent center no-repeat;}
.webgl-content .footer .webgl-logo {background-image: url('webgl-logo.png'); width: 204px; float: left;}
.webgl-content .footer .title {margin-right: 10px; float: right;}
.webgl-content .footer .fullscreen {background-image: url('fullscreen.png'); width: 38px; float: right;}

2.修改UnityProgress.js

如下

function UnityProgress(unityInstance, progress) {
  if (!unityInstance.Module)
    return;
  if (!unityInstance.logo) {
    unityInstance.logo = document.createElement("div");
    unityInstance.logo.className = "logo " + unityInstance.Module.splashScreenStyle;
    unityInstance.container.appendChild(unityInstance.logo);
  }
  if (!unityInstance.progress) {    
    unityInstance.progress = document.createElement("div");
    unityInstance.progress.className = "progress " + unityInstance.Module.splashScreenStyle;
    unityInstance.progress.empty = document.createElement("div");
    unityInstance.progress.empty.className = "empty";
    unityInstance.progress.appendChild(unityInstance.progress.empty);
    unityInstance.progress.full = document.createElement("div");
    unityInstance.progress.full.className = "full";
    unityInstance.progress.appendChild(unityInstance.progress.full);
    unityInstance.container.appendChild(unityInstance.progress);
  }
  unityInstance.progress.full.style.width = (100 * progress) + "%";
  unityInstance.progress.empty.style.width = (100 * (1 - progress)) + "%";
  if (progress == 1)
    unityInstance.logo.style.display = unityInstance.progress.style.display = "none";
}

3.加入新的js代码类Equips /EquipDoc

class Equips {

        constructor(id) {
                this.id = id;
        }

        //判断 所有设备
        GetMyEquipMap() {
                var map = new Map();
                return map;
        }

        //视频点位对应的视频地址
        GetVideoInfo() {
                var map = new Map();
                //192.168.30.199 公司iP
                // 现场iP
                let nowIp = "192.168.92.10";
                map.set("209A-1F监控摄像头01", "http://" + nowIp + ":8888/hk46/stream.m3u8");//46
                return map;
        }

        //获取隐面ip
        GetYMIp() {
                return "http://192.168.30.199:1889/#/view/";
        }

        //是否是S4平台
        //对应url

        //对应的工装或设备界面url
        GetMyMap() {
                var map = new Map();
                map.set("S1-LF", { Is209Platform: "1", EquipUrl: "1798537918864805889" });

                return map;
        }

        //获取视频流对应地址
        GetVideoRtsp(str) {
                var map = this.GetVideoInfo();
                console.log("GetVideoRtsp", str);
                if (map.has(str)) {
                        return map.get(str);
                }
                else {
                        return "";
                }
        }


        GetIsContainEquip(str) {
                var map = this.GetMyEquipMap();
                console.log("GetIsContainEquip", str);
                if (map.has(str)) {
                        return "1";
                }
                else {
                        return "0";
                }
        }

}

export { Equips };

class EquipDoc {
        constructor(id) {
                this.id = id;
        }

        // 获取所有物体对应设备编码
        GetDocMap() {
                let url_P="http://192.168.30.199:1889/#/view/";
                var map = new Map();
                map.set("S1-LF", url_P+"");
                return map;
        }
}

export { EquipDoc };

加入main.js

import { Equips } from './TemplateData/Equips.js';
import { EquipDoc } from './TemplateData/EquipDoc.js';


//let myEquipManager = new Equips(100);
//console.log("456",myEquipManager);
//myEquipManager.FindEquip("?");

主要作用就是，将TemplateData文件加下新增文件导入进来，方便调用

html中的最终调用

在html 的 “module”中将 自己新增的两个类 Equips 以及EquipDoc导入到当前代码块中
通过window代码指定Equips和EquipDoc

<!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 | DS_Insight_Viewer</title>
  <link rel="shortcut icon" href="TemplateData/favicon.ico">
  <link rel="stylesheet" href="TemplateData/style.css">
  <script src="TemplateData/UnityProgress.js"></script>
  <script src="Build/UnityLoader.js"></script>
  <script type="module">
    import { Equips } from './TemplateData/Equips.js';
    import { EquipDoc } from './TemplateData/EquipDoc.js';
    window.equipsFromModule = Equips;
    window.equipDocFromModule = EquipDoc;
    window.addEventListener('message', function (e) {
      console.log("xa消息", e.data);
      unityInstance.SendMessage("HtmlMessage", "ReceiveHtmlMessage", JSON.stringify(e.data));
    });

    var unityInstance = UnityLoader.instantiate("unityContainer", "Build/webgl.json", { onProgress: UnityProgress });

  </script>
  <script>
    function ReceiveUnityMessage(str) {
      console.log("收到 Unity 消息: " + str);
      var data = JSON.parse(str);
      if (!data || !data.主题名称) {
        console.error("收到空消息");
        return;
      }


      let msg = {
        type: "webGl",
        time: Date.now(),
      }
      let myequips = new window.equipsFromModule(100);
      let myequipDoc = new window.equipDocFromModule(101);
      if (data.主题名称 == "登录") {
        msg.data = [
          {
            flag: "left",
            data: myequips.GetYMIp() + "1800458624120692737",
            method: "changeIframe"
          },
          {
            flag: "right",
            data: myequips.GetYMIp() + "1800463754467516417",
            method: "changeIframe"
          },
          {
            flag: "top",
            data: myequips.GetYMIp() + "1775422564135383041",
            method: "changeIframe"
          },
          {
            flag: "bottom",
            data: myequips.GetYMIp() + "1775422842511339522",
            method: "changeIframe"
          },
        ]
      }
      else if (data.主题名称.search("监控") != -1) {
        msg.data = [
          {
            flag: "whole",
            data: myequips.GetYMIp() + "1770730214117126146",
            method: "changeIframe"
          },
          {
            "method": "writeVariable",
            "data": [
              {
                "key": "url",
                "value": myequips.GetVideoRtsp(data.主题名称),//"https://sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/hls/xgplayer-demo.m3u8"
                "type": ""
              }
            ]
          }
        ]
      }
      else {

        let IsContain = myequips.GetIsContainEquip(data.主题名称);
        console.log(IsContain);
        //是设备  钻孔设备属于设备 其他属于工装，钻孔设备尚未提供
        if (IsContain == "1") {
        }
        //全部都是工装
        else {
          let isS4 = myequips.GetMyMap().get(data.主题名称).Is209Platform;
          console.log(isS4);
          let docMap = myequipDoc.GetDocMap();
          // s4工装
          if (isS4 == 1) {
            console.log("s42");
            msg.data = [
              {
                flag: "leftSmall",
                data: "",
                method: "changeIframe"
              },
              {
                flag: "left",
                data: myequips.GetYMIp() + myequips.GetMyMap().get(data.主题名称).EquipUrl,
                method: "changeIframe"
              },
              {
                flag: "right",
                data: myequips.GetYMIp() + "1788137204145516545",
                method: "changeIframe"
              },
              {
                flag: "top",
                data: myequips.GetYMIp() + "1768545351616221186",
                method: "changeIframe"
              },
              {
                flag: "bottom",
                data: myequips.GetYMIp() + "1768533642419687426",
                method: "changeIframe"
              },
              {
                flag: "small",
                data: myequips.GetYMIp() + "1788751319549407233",
                method: "changeIframe"
              }
              ,
              {
                "method": "writeVariable",
                "data": [
                  {
                    "key": "equipId",
                    "value": data.主题名称,
                    "type": "global"
                  }
                ]
              }
            ]

          }
          //s5工装
          else {
            console.log("s52");
            msg.data = [
              {
                flag: "leftSmall",
                data: "",
                method: "changeIframe"
              },
              {
                flag: "left",
                data: myequips.GetYMIp() + myequips.GetMyMap().get(data.主题名称).EquipUrl,
                method: "changeIframe"
              },
              {
                flag: "right",
                data: myequips.GetYMIp() + "1788137204145516545",
                method: "changeIframe"
              },
              {
                flag: "top",
                data: myequips.GetYMIp() + "1768545351616221186",
                method: "changeIframe"
              },
              {
                flag: "bottom",
                data: myequips.GetYMIp() + "1768533709172035586",
                method: "changeIframe"
              },
              {
                flag: "small",
                data: myequips.GetYMIp() + "1788751319549407233",
                method: "changeIframe"
              }
              ,
              {
                "method": "writeVariable",
                "data": [
                  {
                    "key": "equipId",
                    "value": data.主题名称,
                    "type": "global"
                  }
                ]
              }
            ]
          }
        }
      }
    

    console.log("msg:", msg)
    // 向隐面发送消息, 隐面会执行 iframe 的切换
    if (msg.data) {
      window.parent.postMessage(JSON.stringify(msg), '*');
    }
    }
  </script>
</head>

<body>
  <div class="webgl-content" style="width: 100%; height: 100%;overflow-y: hidden;">
    <div id="unityContainer" style="width: 100%; height: 100%"></div>
  </div>
</body>

</html>
Unity-WebGL发布之C#与JS通信交互
NslCarry的博客
02-20 4213
版本：Unity2020.3.28 官方文档 最近项目要发布到WebGL,最近刚开始捣鼓。目前要实现Web端播放rtsp，看了很多文章都是在web端解决unity发布WebGL后如何播放rtsp。本人亲测了UMP2.0.3插件，可以在window下现实rtsp播放，但发布到Web端后会提示跨越错误，希望有大佬可以指点指点。 既然准备在web端解决unity发布WebGL后如何播放rtsp的问题，那么在发布WebGL后C#如何与JS通信交互呢？ 直奔主题 1.在 Assets 文件夹中的“Plugi
Unity 2021 发布WebGL之后， 实现和网页(JS)进行交互
LWKlwk11的博客
11-16 2451
Unity WebGL JS 交互
Unity3d的调用web交互
06-08
Unity3d的调用web交互,在web页面中，也有代码可参考！
Unity WebGL开发
qq_26318597的博客
05-12 7910
hi,WebGL
Unity WebGL开发汇总
Star_MengMeng的博客
08-02 2191
Unity WebGL开发汇总
unity发布webgl开发记录
青沐的程序生涯
05-06 1万+
安装Unity3d并导入unitypackage 在unity官网下载最新版本，虽然下载速度巨慢，安装的时候要把WebGL选上。 打开之后新建一个project，在Asset中点击右键import package将项目素材导入。弄好之后发布，选择File–>Build Settings–>选择WebGL，Development Build不要选，下面两个选项选上（先选了Development Build，把下面两个选项选上，再剔除Development Build）。刚开始的build a
Unity开发WebGl总结
cm1405276135的博客
04-01 661
一、问题 1、不支持IP套接字 2、PlayerSettings的Rendering—》ColoSpace只支持Gamma 3、PlayerSettings的PublishingSettings的—》Compression Format的压缩问题： gzip：这是默认选项。gzip文件大于Brotli文件，但构建速度更快，并且所有浏览器均通过http和https对其进行本地支持。 ...
Unity、WebGl、全屏模式下输入中文
03-19
在Unity引擎中，WebGL是一种将游戏或交互式应用打包为网页端可执行代码的技术，它使得用户无需安装额外插件就能在浏览器中体验3D内容。然而，当我们在Unity的WebGL构建中运行项目，并尝试在全屏模式下输入中文时，...
Unity WebGL下读取Excel
04-23
3. **JavaScript接口**：由于Unity WebGL与Web浏览器之间的通信是通过JavaScript接口（JSIL）完成的，你需要创建一个JavaScript文件，暴露一个方法供Unity调用，以实现读取Excel文件的功能。 4. **用户上传文件**：...
vue项目结合unity webgl通信（内含untiy+vue代码）
04-10
在本项目中，我们主要探讨的是如何将Vue.js前端框架与Unity WebGL进行集成，实现两者之间的双向通信。Vue.js是一个轻量级、高性能的前端框架，而Unity则是一款强大的3D游戏开发引擎，WebGL是Unity导出为浏览器运行的...
UNITY WebGL实现中文输入
01-30
模拟Unity InputField位置动态生成html input，实现中文输入
Unity3D 官方教程：WebGL（一）
热门推荐
路见不平先甩锅
02-23 11万+
Unity3D官方教程：WebGL 什么是 Unity WebGL? 创建一个Unity WebGL项目
基于Unity+Vue3通信交互的WebGL项目发布实践
他在试图用代码书写这个世界，字里行间温柔尽显。勿忘初心，努力做有价值的技术文章。
03-29 8650
本博客基于Unity+Vue3通信交互的WebGL项目发布实践做了一个测试demo演示unity与vue通过第三方插件**unity-webgl**通信的流程。分三步完成：1、搭建Unity测试项目并发布WebGL部署到Vue项目中。2、验证Vue向Unity发送信息：通过前端UI控制Unity游戏物体的显隐和修改颜色。3、验证Unity向Vue发送信息：Unity监听键盘空格键按下触发前端提示框的显示。
【Unity】Unity与web方法互调
Emma_Hui的博客
11-26 5044
一、unity向web传数据、unity调用web方法 1、web端js内： <script type="text/javascript" language="javascript"> /* * value：web端接收到的来自unity的参数 */ function func_Name(value){ //do sth } </script> 2、unity端cs内： /* * param1：web端被调用的方法名 * param2：unity向web传递的参数 */
JSBinding+Bridge.NET：Unity游戏热更新方案
newtonsm的博客
07-02 1003
https://blog.csdn.net/qq_33347809/article/details/83784975 unity实现应用内更新 https://www.cnblogs.com/answerwinner/p/6037911.html JSBinding+Bridge.NET：Unity游戏热更新方案 老版本链接如下：http://www.cnblogs.com/answerw...
Unity WebGL - Web与Unity交互方法
Mr.Striker 的技术博客
09-08 4709
一般我们用Unity WebGL 进行项目制作时会需要从Web发送数据到Unity，也会反过来从Unity调用Web方法以及发送数据，以下是一些技术点备注
unity3d发布webgl手机测试流程
haibo19981的专栏
08-28 5023
win7、jdk8、tomcat8.5、unity3d5.3.5 1.搭测试环境 安装tomcat8.5。 默认端口8080。 启动tomcat(使用zip版本的，需要每次双击startup.bat)。 在防火墙中添加入站规则，设置TCP要开放的特定本地端口为8080。 若不设置，则你只能在电脑上测试。 注意：我之前本想用win7的IIS测试手机的，但发现，添加上80
如何在Unity WebGL上实现一套全流程简易的TextureStreaming方案
最新发布
Render-better-life
09-27 1816
如何在Unity WebGL平台设计和实现一套全流程简易版本的TextureStreaming方案，解决场景加载慢，场景包体大的问题，本文分享一些思路和实现过程
Unity打包到Webgl平台以及遇到的问题
unity_http的博客
12-08 9559
unity打包webgl
unity发布 webgl在手机端 inputfield唤醒键盘输入
06-06
在 Unity 中发布 WebGL 并在手机端运行时，可能会遇到 InputField 无法唤醒键盘输入的问题。这是因为在移动端浏览器中，需要用户手动触发键盘输入。 为了解决这个问题，你可以使用 JavaScript 脚本来实现自动唤醒键盘输入。具体步骤如下： 1. 在 Unity 中，找到需要唤醒键盘输入的 InputField 对象，在其上添加一个名为 "input" 的 ID。 2. 在你的 HTML 页面中，添加以下 JavaScript 代码： ``` <script> function showKeyboard() { var input = document.getElementById("input"); input.focus(); } </script> ``` 3. 在 Unity 中，创建一个命名为 "showKeyboard" 的 JavaScript 方法，并将其绑定到一个按钮或其他 UI 元素上。 4. 在 "showKeyboard" 方法中，使用 Unity 的 SendMessage 方法调用刚才在 HTML 页面中定义的 "showKeyboard" 方法。 ``` function showKeyboard() { SendMessage("WebGLInputField", "showKeyboard"); } ``` 5. 在 HTML 页面中，定义一个名为 "WebGLInputField" 的 JavaScript 对象，并添加一个名为 "showKeyboard" 的方法。 ``` <script> var WebGLInputField = { showKeyboard: function() { var input = document.getElementById("input"); input.focus(); } }; </script> ``` 6. 最后，在 Unity 中发布 WebGL，将生成的 HTML 文件和 JavaScript 文件拷贝到服务器上，并在移动端浏览器中打开该页面，点击按钮即可自动唤醒键盘输入。 希望这些步骤能够帮助你解决问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值