Unity打包到Webgl平台以及遇到的问题

news2024/11/17 0:26:27

Unity打包到Webgl平台以及遇到的问题

参考网站

Unity打包WebGL的全过程及在打包和使用过程中会遇到的问题(本地测试)-CSDN博客

unity打包到Webgl 并配置能正常运行

这里我用的是Unity2022.3.3f1c1版本

有两种方法

1、配置本地web服务
2、安装vsCode>添加插件LiveServer>把工程托到vsCode里在index.html上右键Open with Live Server 即可运行webgl

首先安装webGL模块

在这里插入图片描述
新建一个空工程

切到WebGL平台

PlayerSettings设置

Resolution and Presentation设置分辨率 : 将会在浏览器显示的默认大小

在这里插入图片描述
Other Settings

有的版本会有一个警告:

Unity Other Settings的默认设置在打开后会看到有警告，其大致意思就是在提醒我们要在 Unity WebGL 构建中启用高质量的光照贴图编码并确保 WebGL 2 兼容性，解决这个警告只需要将Auto Graphics API 自动图形接口关闭后在Graphics APIs选择WebGL2就可以解决这个警告

我们这里也用WebGL2的渲染方式

在这里插入图片描述

Publishing Settings 发布设置

分两种情况介绍 选择压缩的 选择不压缩的

在这里插入图片描述

Compression Format是打包后的Build包的压缩格式

在这里插入图片描述
压缩和不压缩出来的包展示：

没有压缩的

在这里插入图片描述

选择Gzip压缩的

在这里插入图片描述

选择Gzip压缩 没勾压缩回退的 这种的webgl运行加载会出错

!在这里插入图片描述

到这里打包以前的所有配置就都已经完了

接下来就是配置本地的服务器测试环境

先介绍第一种 发布时 不压缩的情况

在这里插入图片描述
打包后我们会发现在我们的文件夹里会有一个网址html，

这代表我们的Web包已经打成功了，

那么直接点击这个html文件运行我们的项目会发现一个报错
在这里插入图片描述
提示我们没有web服务

这个问题是因为我们Web包必须在有服务器支持的环境下才能够正常运行，

所以接下来我们要配置我们的包体在本地也就是127.0.0的环境下的服务器托管状态

配置包体在本地也就是127.0.0的环境下的服务器托管状态

分两步
1、启用我们的电脑的Windows功能
2、创建一个新的网络（映射到我们自己的包体）

首先要配置（启用）我们的电脑的Windows功能

控制面板>程序>启用或关闭windows功能
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

Internet Information Services左边的箭头全选后点击 确定就可以

接下来就是创建一个新的网络

我的电脑（右键）>管理>服务和应用管理>Internet Information Services>

网站（右键 添加一个新的网站）

在这里插入图片描述

!在这里插入图片描述

在这里插入图片描述

!在这里插入图片描述

点击确定后就会创建出一个我们的本地路径的web服务

然后在我们的网页上输入127.0.0.1:8080（设置的端口号）

运行后发现还是进不去F12打开调试看一下

还是报错

在这里插入图片描述

在这里插入图片描述

我们在网络里发现我们的.data文件出现了报错我们双击他就会进入这样的界面

在这里插入图片描述
.data的解析出错

这是因为我们的网站MIME类型不支持解析.data类型文件

需要我们自己在网站的MIME里添加一个.data类型

我们再次回到我们的网站配置界面 点击我们添加的网站

在这里插入图片描述
找到MIME类型双击它 双击

然后点击添加
在这里插入图片描述
application/octet-stream

点击确定就添加上了我们的类型

然后再回去我们的网站就可以正常运行了
在这里插入图片描述

至此所有环境配置完成

第二种压缩的发布设置

在这里插入图片描述
压缩后需要在压缩回退这里勾上

否则web运行时会出错

在这里插入图片描述

然后点击添加 在把这两个文件扩展名添加上

!在这里插入图片描述

.unity3d

.unityweb

application/octet-stream

.json (一般情况下在配置好IIS后会有该类型，若没有就添加)

application/json

然后压缩的也可以正常运行了

第二种运行Unity打包出web的办法

1、安装VSCode

vsCode下载慢的话 可以百度vsCode下载慢 会有办法的

VSCode下载和安装教程（超详细）以及解决VSCode下载速度特别慢的问题_vscode下载太慢-CSDN博客

2、安装LiveServer插件

这个插件是用来启动本地服务的 所以可以顺利运行webgl工程

在这里插入图片描述
3、vscode打开unity发布的webgl

可以直接把文件夹拖到vsCode里 会提示信任 点击信任就行

4、选择index,在文本编辑位置，右键选择 Open with Live Server 即可运行webgl

Unity webgl读取streamingAssetsPath文件夹txt

参考网站

里面有读取音频 texture 等都有参考价值

Unity webgl读取streamingAssetsPath文件夹txt_unitywebgl读取steamasset-CSDN博客

在StreamingAssets文件夹下新建一个txt 里面随便写点东西

也可以写json一些配置文件用于游戏的配置设置

把这个脚本挂到场景的物体上 在脚本上拖一个Text

这里只演示了一下读取

using System;
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.Events;
using UnityEngine.Networking;
using UnityEngine.UI;

public class ReadConfig : MonoBehaviour
{

    public Text ReadText;

    // Start is called before the first frame update
    void Start()
    {
        StartCoroutine(ReadTxt("ConfigData.txt", ReadTxtCallBack));
    }

    private void ReadTxtCallBack(string str)
    {
        ReadText.text = str;
    }

    private IEnumerator ReadTxt(string configName, UnityAction<string> action = null)
    {
        string path;
        //手机路径  需要加file://
#if UNITY_WIN_STANDALONE || UNITY_IPHONE &&!UNITY_EDITOR
        path ="file://"+ Application.streamingAssetsPath + configName;
#else 
        path = Application.streamingAssetsPath + "/" + configName;
#endif
        UnityWebRequest unityWebRequest = UnityWebRequest.Get(path);
        yield return unityWebRequest.SendWebRequest();

        if (unityWebRequest.error != null)
            Debug.Log(unityWebRequest.error);
        else
        {
            string content = unityWebRequest.downloadHandler.text;
            if (action != null)
                action(content);
        }
    }

    // Update is called once per frame
    void Update()
    {

    }
}
unity中C#调用js

参考网站

Interaction with browser scripting - Unity 手册 (unity3d.com)

Unity2021发布WebGL与网页交互问题的解决 - 自由资讯 (558idc.com)

在项目中使用浏览器 JavaScript 的建议方法是将 JavaScript 源代码添加到项目中，

然后直接从脚本代码中调用这些函数。

首先是需要在工程的Asset目录里面建一个Plugins文件夹，

然后在文件夹里面创建一个.txt文件，名字倒是无所谓，

创建好后要把扩展名改成.jslib。

文件需要有如下所示的语法：

这其中只有mergeInto的第二个参数是可以修改的，

第二个参数是一个对象，这个对象里面包含了多个方法的引用，

这些方法（例如：Hello（）、BingdeWebGLTexture（）等）都是在Unity编程中可以引入的。

这些方法内调用的方法（例如：wiindow.alert()、GLctx.bindTexture()等）都是将来页面中可以被调用的。

mergeInto(LibraryManager.library, {

  Hello: function () {
    window.alert("Hello, world!");
  },

  HelloString: function (str) {
    window.alert(UTF8ToString(str));
  },

  PrintFloatArray: function (array, size) {
    for(var i = 0; i < size; i++)
    console.log(HEAPF32[(array >> 2) + i]);
  },

  AddNumbers: function (x, y) {
    return x + y;
  },

  StringReturnValueFunction: function () {
    var returnStr = "bla";
    var bufferSize = lengthBytesUTF8(returnStr) + 1;
    var buffer = _malloc(bufferSize);
    stringToUTF8(returnStr, buffer, bufferSize);
    return buffer;
  },

  BindWebGLTexture: function (texture) {
    GLctx.bindTexture(GLctx.TEXTURE_2D, GL.textures[texture]);
  },

});

具体在Unity编程中引入方法的方式以C#为例

首先需要引入命名空间：

using System.Runtime.InteropServices;

其次需要写具体引入代码：

[DllImport("__Internal")] private static extern void Hello();

using System.Collections;
using System.Collections.Generic;
using System.Runtime.InteropServices;
using UnityEngine;

public class CShapCallJs : MonoBehaviour
{
    [DllImport("__Internal")]
    private static extern void Hello();

    [DllImport("__Internal")]
    private static extern void HelloString(string str);

    [DllImport("__Internal")]
    private static extern void PrintFloatArray(float[] array, int size);

    [DllImport("__Internal")]
    private static extern int AddNumbers(int x, int y);

    [DllImport("__Internal")]
    private static extern string StringReturnValueFunction();

    [DllImport("__Internal")]
    private static extern void BindWebGLTexture(int texture);


    public bool CanRotate;
    public float angle = 45;

    void Start()
    {
        Hello();//在js里写了 出先一个弹窗tip

        HelloString("这是一个字符串");

        float[] myArray = new float[10];
        PrintFloatArray(myArray, myArray.Length);

        int result = AddNumbers(5, 7);
        Debug.Log(result);

        Debug.Log(StringReturnValueFunction());

        //var texture = new Texture2D(0, 0, TextureFormat.ARGB32, false);
        //BindWebGLTexture(texture.GetNativeTextureID());

    }

    void Update()
    {
        if (CanRotate)
        {
            this.transform.Rotate(Vector3.up, Time.deltaTime * angle, Space.World);
        }

    }
    public void OnSetStart()
    {
        CanRotate = true;
    }
    public void OnSetEnd()
    {
        CanRotate = false;
    }
}
js调用unity中C#的代码

(页面方法调用Unity内方法的办法)

有时需要从浏览器的 JavaScript 向 Unity 脚本发送一些数据或通知。

建议的做法是调用内容中的游戏对象上的方法。

如果要从嵌入在项目中的 JavaScript 插件执行调用，

可使用以下代码：

MyGameInstance.SendMessage(objectName, methodName, value);

其中，objectName 是场景中的对象名称；methodName 是当前附加到该对象的脚本中的方法名称；value 可以是字符串、数字，也可为空。

在这里插入图片描述

很空虚具体怎么用呢

看看打出包来的官方index.html程序 怎么调用

官方用了一个全屏的功能 unityInstance.SetFullscreen(1);

在这里插入图片描述

如果是我们自己怎么用呢 ，这个是被定义在了拉姆达表达式里 我们用一个对象给接收出来

就可以用这个Unity实例对象了

具体怎么用呢

我们先创建两个按钮测试一下

在 unity打好的webgl包里 的 index.html中 body下创建两个button

在这里插入图片描述

在这里插入图片描述

在这里可以看到这两个按钮

接下来给这两个按钮 用js添加点击事件

在这里插入图片描述

myUnityInstance.SendMessage(“Cube”, “OnSetStart”);

这个SendMessage 对应到了 unity里的方法

在这里插入图片描述

接下来看看打印出来的myUnityInstance

在这里插入图片描述

这两个都是熟悉的方法了 打印出来也有个好处是 能看到里面能用到的方法

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1299158.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

C语言进阶之路之顶峰相见篇

C语言进阶之路之顶峰相见篇

目录 一、学习目标 二、宏定义 预处理 宏的概念 带参宏 无值宏定义 三、条件编译 条件编译 条件编译的使用场景 四、头文件 头文件的作用 头文件的内容 头文件的基础语句&#xff1a; GCC编译器的4个编译步骤&#xff1a; 总结 一、学习目标 掌握宏定义含义和用…
阅读更多...
持续集成交付CICD：通过API方式上传Nexus制品

持续集成交付CICD：通过API方式上传Nexus制品

目录 一、实验 1.通过API方式上传Nexus制品 二、问题 1.如何通过API方式上传PNG图片 2.如何通过API方式上传tar.gz 与 ZIP文件 3.如何通过API方式上传Jar file文件 4.如何通过API方式上传制品&#xff08;maven类型的制品&#xff09;文件 5.如何下载制品 一、实验 1.通…
阅读更多...
我在Vscode学OpenCV 图像处理二（滤除噪声干扰）

我在Vscode学OpenCV 图像处理二（滤除噪声干扰）

图像处理二 滤除噪声干扰三、噪声3.1图像噪声3.2 滤波3.2.1均值滤波&#xff08;1&#xff09;锚点&#xff08;2&#xff09;中心点&#xff08;下面第3小点会详细解释&#xff09;&#xff08;3&#xff09;核的大小奇偶数的区别&#xff08;1&#xff09;举例奇偶的例子&…
阅读更多...
tomcat篇---第四篇

tomcat篇---第四篇

系列文章目录 文章目录 系列文章目录前言一、为什么我们将tomcat称为Web容器或者Servlet容器 ？二、tomcat是如何处理Http请求流程的？三、tomcat结构目录有哪些?前言 前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到网站，这…
阅读更多...
软件测试相关

软件测试相关

软件测试是什么&#xff1f; 使用人工和自动手段来运行或测试某个系统的过程&#xff0c;其目的在于验证它是否满足规定的需求或弄清预期结果与实际结果的差别。 为什么做软件测试&#xff1f;目的是什么&#xff1f; 发现软件存在的代码或业务逻辑错误 检验产品是否符合用户需…
阅读更多...
Docker本地部署Drupal内容管理框架并实现公网远程访问

Docker本地部署Drupal内容管理框架并实现公网远程访问

文章目录 前言1. Docker安装Drupal2. 本地局域网访问3 . Linux 安装cpolar4. 配置Drupal公网访问地址5. 公网远程访问Drupal6. 固定Drupal 公网地址7. 结语 前言 Dupal是一个强大的CMS&#xff0c;适用于各种不同的网站项目&#xff0c;从小型个人博客到大型企业级门户网站。它…
阅读更多...
免费分享一套Springboot+Vue前后端分离的在线商城系统，挺实用的

免费分享一套Springboot+Vue前后端分离的在线商城系统，挺实用的

大家好&#xff0c;我是java1234_小锋老师&#xff0c;看到一个不错的SpringbootVue前后端分离的在线商城系统&#xff0c;分享下哈。 项目视频演示 【免费】SpringbootVue在线商城系统 毕业设计 Java毕业设计_哔哩哔哩_bilibili【免费】springbootvue在线商城系统 毕业设计 …
阅读更多...
EfficientNet: Rethinking Model Scaling for Convolutional Neural Networks（2020）

EfficientNet: Rethinking Model Scaling for Convolutional Neural Networks（2020）

文章目录 -Abstract1. Introductiondiss former methodour method 2. Related Work3. Compound Model Scaling3.1. 问题公式化3.2. Scaling Dimensions3.3. Compound Scaling 4. EfficientNet Architecture5. Experiments6. Discussion7. Conclusion 原文链接 源代码 - 本文中…
阅读更多...
SpringIOC之ConfigurationClassUtils

SpringIOC之ConfigurationClassUtils

博主介绍&#xff1a;✌全网粉丝5W&#xff0c;全栈开发工程师&#xff0c;从事多年软件开发&#xff0c;在大厂呆过。持有软件中级、六级等证书。可提供微服务项目搭建与毕业项目实战&#xff0c;博主也曾写过优秀论文&#xff0c;查重率极低&#xff0c;在这方面有丰富的经验…
阅读更多...
mysql面试题——日志

mysql面试题——日志

一&#xff1a;为什么需要REDO日志 缓冲池可以帮助我们消除CPU和磁盘之间的鸿沟&#xff0c;checkpoint机制可以保证数据的最终落盘&#xff0c;然而由于checkpoint 并不是每次变更的时候就触发 的&#xff0c;而是master线程隔一段时间去处理的。所以最坏的情况就是事务提交后…
阅读更多...
【基于Python的二手车数据可视化平台的设计与实现】

【基于Python的二手车数据可视化平台的设计与实现】

基于Python的二手车数据可视化平台的设计与实现 前言数据获取与处理网络爬虫数据存储 可视化平台的设计与实现Flask框架数据可视化 创新点结语 前言 随着社会的不断发展&#xff0c;二手车市场也逐渐成为一个备受关注的领域。为了更好地为二手车的买家和卖家提供信息&#xff…
阅读更多...
【Vue】日常错误总结（持续更新）

【Vue】日常错误总结（持续更新）

日常遇到的小问题汇总, 内容小篇幅少的就全放这里了, 内容多的会在Vue专栏单独分享~ 目录 【Q】 el-form-item值为 null 或 undefined显示““ 【Q】dialog内组件数据刷新总是延迟慢一拍 问题背景描述 解决方案 代码简单模拟 JS 【Q】el-input 不能输入的解决办法 方法…
阅读更多...
如何优雅地使用Mybatis逆向工程生成类

如何优雅地使用Mybatis逆向工程生成类

文/朱季谦 1.环境&#xff1a;SpringBoot 2.在pom.xml文件里引入相关依赖&#xff1a; 1 <plugin>2 <groupId>org.mybatis.generator</groupId>3 <artifactId>mybatis-generator-maven-plugin</artifactId>4 <version>1.3.6<…
阅读更多...
（五）五种最新算法（SWO、COA、LSO、GRO、LO）求解无人机路径规划MATLAB

（五）五种最新算法（SWO、COA、LSO、GRO、LO）求解无人机路径规划MATLAB

一、五种算法&#xff08;SWO、COA、LSO、GRO、LO&#xff09;简介 1、蜘蛛蜂优化算法SWO 蜘蛛蜂优化算法&#xff08;Spider wasp optimizer&#xff0c;SWO&#xff09;由Mohamed Abdel-Basset等人于2023年提出&#xff0c;该算法模型雌性蜘蛛蜂的狩猎、筑巢和交配行为&…
阅读更多...
软件工程之需求分析

软件工程之需求分析

一、对需求的基本认识 1.需求分析简介 (1)什么是需求 用户需求&#xff1a;由用户提出。原始的用户需求通常是不能直接做成产品的&#xff0c;需要对其进行分析提炼&#xff0c;最终形成产品需求。 产品需求&#xff1a;产品经理针对用户需求提出的解决方案。 (2)为什么要…
阅读更多...
数据仓库工具Hive

数据仓库工具Hive

1. 请解释Hive是什么&#xff0c;它的主要用途是什么&#xff1f; Hive是一个基于Hadoop的数据仓库工具&#xff0c;主要用于处理和分析大规模结构化数据。它可以将结构化的数据文件映射为一张数据库表&#xff0c;并提供类似SQL的查询功能&#xff0c;将SQL语句转换为MapRedu…
阅读更多...
排序：非递归的快排

排序：非递归的快排

目录 非递归的快排&#xff1a; 代码分析&#xff1a; 代码演示&#xff1a; 非递归的快排&#xff1a; 众所周知&#xff0c;递归变成非递归&#xff0c;而如果还想具有递归的功能&#xff0c;那么递归的那部分则需要变成循环来实现。 而再我们的排序中&#xff0c;我们可…
阅读更多...
数字逻辑电路基础-组合逻辑电路之4位先行进位加法器

数字逻辑电路基础-组合逻辑电路之4位先行进位加法器

文章目录 一、问题描述二、verilog源码三、仿真结果一、问题描述 前面介绍4位行波进位全加器（串行加法器）的原理及verilog实现，但是它是一种串行加法器，当位数多时，比如32位的二进制数相加，由于进位逐位从低位向高位传递，这会造成相当大的延迟。对于需要快速加法运算的…
阅读更多...
LeNet

LeNet

概念 代码 model import torch.nn as nn import torch.nn.functional as Fclass LeNet(nn.Module):def __init__(self):super(LeNet, self).__init__() # super()继承父类的构造函数self.conv1 nn.Conv2d(3, 16, 5)self.pool1 nn.MaxPool2d(2, 2)self.conv2 nn.Conv2d(16…
阅读更多...
Three.js+pcl.js 实现Web端的点云处理+显示

Three.js+pcl.js 实现Web端的点云处理+显示

1 功能实现 在前面我们实现了PCD的加载器的基础上&#xff0c;这次将加上 pcl.js —— 著名的PCL库的web版本&#xff0c;详情见https://pcl.js.org/&#xff0c;来处理我们加载上去的点云。 具体实现如下&#xff1a; 用户可以通过每个板块的右上角进行处理前 / 后的切换&am…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023