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

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

在这里插入图片描述

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

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

使用git出现的问题

使用git出现的问题

保证 首先保证自己的git已经下载 其次保证自己的gitee账号已经安装并且已经生成ssh公钥 保证自己要push的代码在要上传的文件夹内并且配置文件等都在父文件夹&#xff08;也就是文件没有套着文件&#xff09; 问题 1 $ git push origin master gitgitee.com: Permission de…
阅读更多...
laravel的ORM 对象关系映射

laravel的ORM 对象关系映射

Laravel 中的 ORM&#xff08;Eloquent ORM&#xff09;是 Laravel 框架内置的一种对象关系映射系统&#xff0c;用于在 PHP 应用中与数据库进行交互。Eloquent 提供了一种优雅而直观的语法&#xff0c;使得开发者可以使用面向对象的方式进行数据库查询和操作。 定义模型&…
阅读更多...
Git 请输入一个提交信息以解释此合并的必要性

Git 请输入一个提交信息以解释此合并的必要性

操作方法&#xff1a;按住Ctrl加下面的某个字母
阅读更多...
linux-man命令的使用及练习

linux-man命令的使用及练习

目录 1. 命令概述 2. 使用 3. 练习 ?man services时报错&#xff1a;No manual entry for services的解决办法 4. man命令中常用按键以及用途 1. 命令概述 Linux提供了丰富的帮助手册&#xff0c;当你需要查看某个命令的参数时不必到处上网查找&#xff0c;只要man一下即…
阅读更多...
PID控制参数整定（调节方法）原理+图示+MATLAB调试

PID控制参数整定（调节方法）原理+图示+MATLAB调试

PID控制参数整定&#xff08;调节方法&#xff09;原理图示MATLAB调试 Chapter1 PID控制参数整定&#xff08;调节方法&#xff09;原理图示MATLAB调试序一、P参数选取二、I的调节三、D的调节四、总结 Chapter2 PID参数调整&#xff0c;个人经验&#xff08;配输出曲线图&#…
阅读更多...
多人聊天程序

多人聊天程序

服务端 import java.io.*; import java.net.*; import java.util.ArrayList; public class Server{public static ServerSocket server_socket;public static ArrayList<Socket> socketListnew ArrayList<Socket>(); public static void main(String []args){try{…
阅读更多...
触想嵌入式工业一体机在智能垃圾分类站的应用

触想嵌入式工业一体机在智能垃圾分类站的应用

1、行业发展背景 根据住建部给出的目标&#xff0c;到2025年前&#xff0c;全国地级及以上城市要基本建成垃圾分类处理系统。随着垃圾分类政策在全国强制落地&#xff0c;终端执行层面面临的最迫切问题是垃圾分类的准确性与社会参与意愿&#xff0c;而这两点与垃圾分类操作的简…
阅读更多...
2004-2021年上市公司环境规制强度相关数据

2004-2021年上市公司环境规制强度相关数据

2004-2021年上市公司环境规制强度相关数据 1、时间&#xff1a;2004-2021年 2、指标&#xff1a;年份、股票代码、股票简称、行业名称、行业代码、省份、城市、区县、行政区划代码、城市代码、区县代码、首次上市年份、上市状态、所属省份-工业增加值_亿元、所属省份-治理废气…
阅读更多...
TCP一对一聊天

TCP一对一聊天

客户端 import java.awt.BorderLayout; import java.awt.Color; import java.awt.Dimension; import java.awt.Font; import java.awt.event.ActionEvent; import java.awt.event.ActionListener; import java.io.BufferedReader; import java.io.IOException; import java.io…
阅读更多...
Leetcode 97. 交错字符串

Leetcode 97. 交错字符串

class Solution {//用dp[i][j]表示s1的前i个字符和s2的前j个字符能否组成s3的前ij个字符public boolean isInterleave(String s1, String s2, String s3) {int n1 s1.length();int n2 s2.length();int n3 s3.length();if(n1 n2 ! n3){return false;}boolean[][] dp new bo…
阅读更多...
智能优化算法应用：基于厨师算法无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用：基于厨师算法无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用&#xff1a;基于厨师算法无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用&#xff1a;基于厨师算法无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.厨师算法4.实验参数设定5.算法结果6.参考文献7.MATLAB…
阅读更多...
AWS KeyPair密钥格式转换PPK＜＞PEM

AWS KeyPair密钥格式转换PPK＜＞PEM

概述说明 PEM&#xff08;Privacy Enhanced Mail&#xff09;和PPK&#xff08;Putty Private Key&#xff09;都是与加密和安全相关的文件格式&#xff0c;通常用于存储私钥信息。它们在不同的上下文中使用&#xff0c;并且与不同的软件和协议相关联。 PEM&#xff08;Priva…
阅读更多...
网络层之电子邮件、万维网和HTTP协议

网络层之电子邮件、万维网和HTTP协议

学习的最大理由是想摆脱平庸&#xff0c;早一天就多一份人生的精彩&#xff1b;迟一天就多一天平庸的困扰。各位小伙伴&#xff0c;如果您&#xff1a; 想系统/深入学习某技术知识点… 一个人摸索学习很难坚持&#xff0c;想组团高效学习… 想写博客但无从下手&#xff0c;急需…
阅读更多...
【已解决】Win7虚拟机安装VMtools报错

【已解决】Win7虚拟机安装VMtools报错

在做以前的实验的时候发现要用到Win7虚拟机&#xff0c;于是就安装了一个Win7的虚拟机&#xff0c;但是发现屏幕太小&#xff0c;而且来回复制文本、复制文件太不方便了&#xff0c;索性就安装了VMtools&#xff0c;发现还安装不成– 情况1 报错&#xff1a;本程序需要您将此…
阅读更多...
EMQX的emqx_auth_mongo报错：OP_QUERY is no longer supported

EMQX的emqx_auth_mongo报错：OP_QUERY is no longer supported

背景 我的目标是想使用 EMQX 官方提供的 emqx_auth_mongo 的设备接入认证/鉴权插件实现对设备的接入限制&#xff1b;一开始服务器上有个 6.0.8 的 MongoDB &#xff0c;在启动时遇到了一些错误。处理了错误并成功启动 MongoDB 后&#xff0c;开启 EMQX 的 emqx_auth_mongo 插…
阅读更多...
【AIGC】大语言模型的采样策略--temperature、top-k、top-p等

【AIGC】大语言模型的采样策略--temperature、top-k、top-p等

总结如下&#xff1a; 图片链接 参考 LLM解码-采样策略串讲 LLM大模型解码生成方式总结 LLM探索&#xff1a;GPT类模型的几个常用参数 Top-k, Top-p, Temperature
阅读更多...
计算机网络 | I/O模型介绍

计算机网络 | I/O模型介绍

欢迎关注博主 Mindtechnist 或加入【智能科技社区】一起学习和分享Linux、C、C、Python、Matlab&#xff0c;机器人运动控制、多机器人协作&#xff0c;智能优化算法&#xff0c;贝叶斯滤波与Kalman估计、多传感器信息融合&#xff0c;机器学习&#xff0c;人工智能&#xff0c…
阅读更多...
爱上 `grep`：小白也能用的命令行超能工具！

爱上 `grep`：小白也能用的命令行超能工具！

1. grep 简介 grep 是一款命令行工具&#xff0c;它的任务是在文件中搜索特定的文本模式。在 Windows 上&#xff0c;我们可以通过安装 Chocolatey 包管理器来安装 grep。 2. 在 Windows 上安装 grep 打开 Windows PowerShell 首先&#xff0c;我们需要确保你已经安装了 Cho…
阅读更多...
PGSQL(PostgreSQL)数据库基础篇：PostgreSQL 的 主要优点 、 劣势 、体系结构 、核心功能 、安装教程。

PGSQL(PostgreSQL)数据库基础篇：PostgreSQL 的 主要优点 、 劣势 、体系结构 、核心功能 、安装教程。

文章目录 PostgreSQL 的 主要优点PostgreSQL 的 应用劣势PostgreSQL 的体系结构PostgreSQL 的核心功能PostgreSQL 的适用场景安装部署 PostgreSQL 的 主要优点 1.维护者是PostgreSQL Global Development Group&#xff0c;首次发布于1989年6月。 2.操作系统支持WINDOWS、Linux…
阅读更多...
转换NC或HDF数据时候转出数据无坐标信息的处理方法

转换NC或HDF数据时候转出数据无坐标信息的处理方法

有时候我们在转换NC或HDF数据时&#xff0c;有时候会出现没有坐标信息的情况&#xff01;如下图&#xff1a; 这种情况一般是原始数据将坐标信息存储在说明文件中以便后期做生成坐标信息的处理、或坐标存储的形式比较特殊&#xff0c;造成工具无法读取&#xff01;这种数据处理…
阅读更多...
最新文章

Copyright @ 2022~2023