Unity与WebGL的相爱相杀

@小杨同学.

已于 2024-10-18 12:02:38 修改

阅读量1.6k

点赞数 1

分类专栏： Unity_WebGL 文章标签： unity web c#

于 2022-07-04 17:14:25 首次发布

本文链接：https://blog.csdn.net/qq_52159742/article/details/125375383

版权

Unity_WebGL 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

文章目录

一、设置IIS本地服务器
- 1.iis配置完成，打开web包出错
- 2.iis配置完成，IIS网站本机可以访问但局域网其他机器无法访问解决方法
二、Unity打包WebGL2.0后设置浏览器全屏且去掉unity启动的组件
使用Unity开发WebGL功能分类
三、使用Unity开发WebGL功能交互

一、设置IIS本地服务器

提示：搭建本地,UnityWebGL发布在IIS服务器进行测试运行：
😊
原文博主链接：UnityWebGL发布在IIS服务器进行测试运行

打开控制面板->程序->启用或关闭Windows功能->启用IIS,所有选项都勾上

在这里插入图片描述

2.在控制面板右上角点击查看方式-大图标,找到管理工具-Internet Information Services (IIS)管理器

3.新建网址名字英文随便起物理路径就选你打包出来的WebGL项目路径 IP地址下拉框可以选择端口号自己写一个，例如8082 点击确定
在这里插入图片描述
新建网站
4.在网站列表点击刚刚新建立的网站,双击MINE类型,右键-添加, 拓展名:.unityweb,MINE类型:application/binary

注意：Unity打出的web包，记得勾选一下选项，否则会有错误产生(Failed to load resource: the server responded with a status of 404 (Not Found))
在这里插入图片描述

1.iis配置完成，打开web包出错

示例：IIS由于出现权限不足而无法读取配置文件解决方案，如果你也遇到了这个问题可以参考这位博主的博客。
权限不足无法读取配置文件
在这里插入图片描述

2.iis配置完成，IIS网站本机可以访问但局域网其他机器无法访问解决方法

网站所对应的端口必须对外打开才可以，通过防火墙规则可以将网站对应的端口对外开放（注意安全），这样局域网内的电脑就可以访问到你的电脑上部署的网站了。
（1）打开控制面板->防火墙设置

在这里插入图片描述
（2）打开防火墙高级设置

（3）点击入站规则

（4）新建规则

（5）选择端口->下一页

（6）勾选TCP->开启端口
![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/7380ad80b1e14599852b31ec19f59681.png#pic_center

（7）允许连接->全部勾选（域、专用、公用）
在这里插入图片描述

点击完成即可只要是一个网络下，PC和移动端都可访问

二、Unity打包WebGL2.0后设置浏览器全屏且去掉unity启动的组件

1.div元素的id属性值为"unity-container"，宽度和高度都设置为100%，意味着该div元素将占据整个父容器的空间。canvas元素的id属性值为"unity-canvas"，宽度和高度都设置为auto，意味着该canvas元素将自适应父容器的大小。
在这里插入图片描述

 <div id="unity-container" style="width: 100%;height:100%">
          <canvas id="unity-canvas" style="width:auto;height:auto"></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-warning"> </div>
          <div id="unity-footer">
              <div id="unity-webgl-logo"></div>
              <div id="unity-fullscreen-button"></div>
              <div id="unity-build-title">TieFeng_UnDutySystemProject</div>
          </div>
      </div>

2.将非移动端设备，canvas元素的宽度和高度会设置为100%
在这里插入图片描述

          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;
              unityShowBanner('WebGL builds are not supported on mobile devices.');
          } else {
              //canvas.style.width = "1920px";
              //canvas.style.height = "1080px";
              canvas.style.width = "100%";
              canvas.style.height = "100%";
          }

3.修改style.css
设置HTML和BODY元素的宽度和高度为100%，并取消它们的margin和padding。此外，还将overflow属性设置为hidden，以防止内容溢出。
在这里插入图片描述

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.webgl-content {
    width: 100%;
    height: 100%;
}

.unityContainer {
    width: 100%;
    height: 100%;
}

使用Unity开发WebGL功能分类

1.WebGL打开本地选中文件

在这里插入图片描述
基于unity 2020.3.30f1整合的package包，项目中亲测可用。
点击下载Demo

2.Unity 输入框InputField输入问题

在这里插入图片描述

WebGLSupport插件
全屏幕模式下会倒着输入字符，且不会打出中文😒

3.Unity Text组件不显示字体

unity打包成web端，Text组件的默认Font Arial字体会显示不出来！！！
需要去网上下载可以用的字体，或者找你电脑本地存放字体的C盘下，路径为C:\Windows\Fonts导入一个格式为.ttf的中文字体，将Arial字体替换成导入的中文字体即可。

三、使用Unity开发WebGL功能交互

1.unity和js的交互

目前项目上有个录音的功能，然后把数据base64发送给后端进行语音识别，这里web端的录音和发送给后端数据，就用到了与unity和js的交互。
官方WebGL：与浏览器脚本交互

效果图：
我Demo的错误可以忽略… demo是用unity2020版本做的，功能有
1.截取当前浏览器地址的后缀参数
2.unity与Js的交互
3.js向unity发送字符串
writeStringToMemory is deprecated and should not be called! Use stringToUTF8() instead!
在这里插入图片描述
项目Demo unity版本2020.3.30f1

2.unity WebGL中实现覆盖当前浏览器地址的跳转

    [DllImport("__Internal")]
    private static extern string redirectToUrl();
    public void RedirectToUrl() {

        redirectToUrl();
    }

在打包出Html文件写下JavaScript代码
        function redirectCurrentToUrl(url) {
            window.location.replace(url);
        }

unity工程Plugins文件夹新建CookiesReader.jslib文件
在这里插入图片描述

3.unity WebGL中存、取当前浏览器Cookie信息

    [DllImport("__Internal")]
    private static extern string GetBrowserCookie();
    private void Start() {
#if UNITY_WEBGL && !UNITY_EDITOR
    GetBrowserCookie();
#else
        UnityWebRequestHelp.Instance.uid = "10498885";
#endif
    }

Html声明、赋值变量
在这里插入图片描述

在打包出Html文件写下JavaScript代码
        function unitySetCookie(cname, cvalue, exdays) {
            var d = new Date();
            d.setTime(d.getTime() + (exdays /** 24 * 60*/ * 60 * 1000));
            var expires = "expires=" + d.toUTCString();
            document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/;domain=.example.com";
        }
        function unityGetCookie() {
            var cookieValue = getCookie("passport");
            if (typeof myInstance !== "undefined") {
                SaySomethingToUnity("GetBrowserCookieFunction", cookieValue);
            }
        }
        function getCookie(cookieName) {
            return document.cookie.match('(^|;)\\s*' + cookieName + '\\s*=\\s*([^;]+)')?.pop() || '';
        }
        function SaySomethingToUnity(funcname, data) {
            console.log(funcname + data);
            myInstance.SendMessage("Canvas", funcname, data);
            window.focus();
        }

4.unity WebGL中存、读取当前浏览器SESSION信息

// 存储SESSION字段的值
sessionStorage.setItem('mySessionField', 'myValue');

// 检索SESSION字段的值
var myValue = sessionStorage.getItem('mySessionField');

5.unity WebGL中麦克风录音转化成base64并把文件下载到本地

项目截图：
在这里插入图片描述
Demo下载链接🔗

[ 这篇文章后续还会根据项目上遇到的问题一直持续更新的]