Unity之WebGL加载ab包

Posted 2023-04-07 被代码折磨的狗子

一、效果

二、注意事项 

网上有好多关于webgl加载ab包的方法，在实际跟随他们写的操作都失败了，最终在踩坑下我总结了webgl加载ab包要注意的三个问题：

1.ab包的创建生成BuildTarget类型注意使用WebGL（后面会告诉你这一步在哪）

2.加载使用WWW或UnityWebRequest方法（官方有描述，百度也有使用方法，这里不细说了）

3.这里点很重要，也是我在踩坑打包不出来的首要问题，IIS的MIME扩展类型注册你的ab包类型，否则访问会出现404错误（其实如果你们有专门的后台网站可以直接获取到这个ab包文件就不会出现这个问题）

三、 AB包的制作与加载

 下面开始部署制作了

1.首先创建ab包的脚本

Unity之AB包的创建加载_被代码折磨的狗子的博客-CSDN博客_unity 加载ab包

此链接是之前写的创建ab包的方法，直接把创建ab包的脚本替换就好了。其他操作都是一样的。

using UnityEngine;
using UnityEditor;
using System.IO;

/// <summary>
/// AB包创建
/// </summary>
public class CreateAssetBundles : MonoBehaviour

    
    [MenuItem("AssetBundles/Build AssetBundles(WebGL)")] //特性
    static void BuildAssetBundle_WebGL()
    
        string dir = Application.streamingAssetsPath + "/AssetBundles"; //相对路径
        if (!Directory.Exists(dir))   //判断路径是否存在
        
            Directory.CreateDirectory(dir);
        
        BuildPipeline.BuildAssetBundles(dir, BuildAssetBundleOptions.None, BuildTarget.WebGL); //这里是第一点注意事项，BuildTarget类型选择WebGL
    

 2.加载ab包的方式

原理和我之前写的文章是一样的，这里用一个最简单的脚本写一下，方便理解。

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

/// <summary>
/// 主界面管理器
/// </summary>
public class MainManager : MonoBehaviour

    //提示文字
    [SerializeField] Text text;

    //加载按钮
    [SerializeField] Button loadBtn;

    void Start()
    
        //按钮监听
        loadBtn.onClick.AddListener(Load);
    

    //监听方法
    private void Load()
    
        IEnumerator ie = load();
        //开启协程
        StartCoroutine(ie);
    

    string url;
    IEnumerator load()
    

        if (Application.platform == RuntimePlatform.WindowsEditor)
        
            //unity编译器运行时，ab包的加载路径
            text.text = "WindowsEditor";
            url = Application.streamingAssetsPath + "/AssetBundles/cube.model";
        
        else if (Application.platform == RuntimePlatform.WebGLPlayer)
        
            //网页WebGL运行时，ab包的加载路径
            text.text = "WebGLPlayer";
            url = Application.streamingAssetsPath + "/AssetBundles/cube.model";
        

        //UnityWebRequest获取ab包
        UnityWebRequest www = UnityWebRequestAssetBundle.GetAssetBundle(url, 0);
        yield return www.SendWebRequest();

        if (www.isNetworkError || www.isHttpError)
        
            Debug.Log(www.error);
        
        else
        
            //获取ab包内容
            AssetBundle ab = DownloadHandlerAssetBundle.GetContent(www);
            //创建指定名称的ab包模型，其中cube代表ab包中模型的名称
            GameObject cube = ab.LoadAsset<GameObject>("cube");
            Instantiate(cube);
        
    

 界面布局

 把上面脚本挂载后，给按钮和文字拖入赋值就可以了。

四、打包的WebgGL文件配置

这里对应的是上方注意事项的第三条，添加IIS的MIME扩展类型的，这里我们还没有安装IIS的Web服务，所以用文本的方式先配置好。

在打包的文件夹下创建一个 web.config 文件

 

 文件内容是：

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
        <staticContent>
            <mimeMap fileExtension=".unity3d" mimeType="application/octet-stream" />
            <mimeMap fileExtension=".unityweb" mimeType="application/binary" />
            <mimeMap fileExtension=".model" mimeType="application/octet-stream" />
        </staticContent>
        <directoryBrowse enabled="false" />
    </system.webServer>
</configuration>

 下面开始部署iis

五、 Windos安装IIS服务

打包后的WebGL网页是无法直接访问的，需要部署服务器，这里我们用IIS来部署服务器

 1.安装Web服务

打开控制面板，在查看方式选中选择类别，然后选择程序

选择 “启用或关闭Windows功能” 。

建议根据下图勾选，确定后等待安装完成

2.创建网站 

安装完后打开IIS

网站创建

 

 属性配置

 部署完毕后，就可以访问你创建的webgl了。

基于Unity开发WebGL项目加载AB包

  在上一篇文章中我们简单介绍了unity发布webgl时如何加载AB包的方法（连接：基于Unity开发WebGL项目加载AB包(一)_梵高先森丶的博客-CSDN博客），但是上篇中讲述的是AB包放在项目的StreamingAssets文件夹中，我们都知道，在实际应用的场景中，AB包资源往往是不会放在项目里，而是需要从外部加载的。

  那么，接下来本篇文章和下一篇文章，将分别介绍WebGL如何从局域网（本地服务器）加载AB包和如何从公网（外部服务器）加载AB包。废话不多说，直接开始，还是以我们上篇文章创建的工程为例：

一、将AB包资源发布到IIS服务器：

  首先，将我们的AB包资源放到一个指定的文件夹下：

 （PC里放的时Pc端AB包资源，WEB里放的是WebGL端AB包资源）

  然后，在IIS上添加一个新的网站，物理路径选择我们刚刚存放AB包的文件夹，并绑定一个端口：

点击确定，得到我们的网站，点击浏览，发现： 

这时，我们需要把该网站的目录浏览权限打开：

 

启用后重新点击浏览，可以看到：

 

 一个简化的文件夹结构，并且可以点击进入下一层目录。

我们可以尝试点击一下我们的资源，看是否可以直接下载到，然后发现报错：

 

告诉我们是因为没有添加这个格式的MIME类型，那么此时，我们需要添加对应的MIME类型（详情可以看上一篇文章），添加完成后重新尝试下载：

发现已经可以成功下载到资源啦，那也就意味着我们这一步已经成功了。

二、通过局域网加载： 

 首先我们需要另外一台同局域网的终端设备，可以是公司里与你连接同一个网络的同事的电脑，也可以是一个虚拟机。我这里为了方便经常调试，使用了虚拟机。

  在虚拟机浏览器输入你的PC的IP地址，后面加上我们刚发布的网站的地址（物理主机IP+网站端口号），尝试访问：

 发现可以正常访问，并且可以通过点击下载到我们的资源，那么我们接下来就可以尝试在项目中去加载这些资源。

修改代码（将StreamingAssets路径替换为我们的网站地址）：

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

public class LoadABTest : MonoBehaviour


    private void Start()
    
        string filePath = "";
        if (Application.platform == RuntimePlatform.WindowsEditor)
        
            //filePath = Application.streamingAssetsPath + "/PC/myabcube.unity3d";
            filePath = "http://192.1**.*.*:8050" + "/PC/myabcube.unity3d";
        
        else if (Application.platform == RuntimePlatform.WebGLPlayer)
        
            //filePath = Application.streamingAssetsPath + "/WEB/myabcube.unity3d";
            filePath = "http://192.1**.*.*:8050" + "/WEB/myabcube.unity3d";
        

        StartCoroutine(LoadModelEntity(filePath));
    


    private UnityWebRequest request;
    IEnumerator LoadModelEntity(string path)
    

        request = UnityWebRequestAssetBundle.GetAssetBundle(path);//请求资源

        yield return request.SendWebRequest();//等待完成

        AssetBundle ab = (request.downloadHandler as DownloadHandlerAssetBundle).assetBundle;//转为AB包

        if (ab != null)
        
            GameObject objModel = Instantiate(ab.LoadAsset<GameObject>("myabcube"));//实例化

            objModel.name = "MyABCubeGroup";//重命名

            ab.Unload(false);
        
        else
        
            Debug.LogError("ab=null,未加载到AB包");
        
    

修改后保存，删除掉原先StreamingAssets中的资源，并尝试在编辑器运行：

 发现资源正常加载了出来。那么我们进行下一步，将修改后的工程build，发布到IIS（详细过程见上一篇文章）。

完成发布后到虚拟机的浏览器输入网站地址（物理主机IP+网站端口号），发现并未能成功加载到资源，F12开启开发者工具可以看到有报错：

 这个报错是跨域问题报错，关于WebGL进行http请求的跨域问题解决可以看这篇文章：Unity-WebGL进行http请求的跨域问题_StubbrnStar的博客-CSDN博客_unity webgl 跨域

解决方案就是在我们的项目网站和AB包资源网站各添加4个HTTP响应标头（对应名称 值）

Access-Control-Allow-Credentials
true

Access-Control-Allow-Headers
Accept, X-Access-Token, X-Application-Name, X-Request-Sent-Time

Access-Control-Allow-Methods
GET, POST, OPTIONS

Access-Control-Allow-Origin
*

 添加完成后，我们重新在虚拟机的浏览器中打开：

 可以看到，我们的AB包资源已经成功加载出来啦。

至此，我们已经实现了从局域网加载AB包的功能，下一篇文章，我们将介绍从公网加载AB包的方法。