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 updatevoid 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_EDITORpath ="file://"+ Application.streamingAssetsPath + configName;
#else path = Application.streamingAssetsPath + "/" + configName;
#endifUnityWebRequest 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 framevoid 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里寫了 出先一個彈窗tipHelloString("這是一個字符串");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.pswp.cn/news/211131.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/211131.shtml
英文地址，請注明出處：http://en.pswp.cn/news/211131.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

AI仿寫軟件大全，當然熱門的仿寫軟件

AI仿寫軟件大全，當然熱門的仿寫軟件

在創作過程中&#xff0c;往往需要大量的靈感和原創性&#xff0c;而AI仿寫軟件便提供了一種高效、智能的解決方案。本文旨在專心分享AI仿寫軟件有哪些&#xff0c;并為大家解析哪幾款好用的AI仿寫軟件。 AI仿寫的使用 隨著互聯網的快速發展&#xff0c;內容創作需求不斷增長&…
閱讀更多...
Rellax.js，一款超酷的 JavaScript 滾動效果庫

Rellax.js，一款超酷的 JavaScript 滾動效果庫

嗨&#xff0c;大家好&#xff0c;歡迎來到猿鎮&#xff0c;我是鎮長&#xff0c;lee。 又到了和大家見面的時間&#xff0c;今天和大家分享一款輕松實現視差滾動效果的 JavaScript 庫——Rellax.js。無需大量的配置&#xff0c;即可為你的網站增色不少。 什么是Rellax.js&am…
閱讀更多...
奧威亞教學視頻應用云平臺 VideoCover任意文件上傳漏洞復現

奧威亞教學視頻應用云平臺 VideoCover任意文件上傳漏洞復現

0x01 產品簡介 廣州市奧威亞電子科技有限公司教學視頻應用云平臺是一個專門為教育機構和個人教師設計的在線學習平臺。該平臺提供豐富的教學資源和功能，旨在提升教學效果和學習體驗。 0x02 漏洞概述 奧威亞教學視頻應用云平臺 VideoCover.aspx接口處存在任意文件上傳漏洞，未…
閱讀更多...
數字邏輯電路基礎-組合邏輯電路之4位先行進位加法器

數字邏輯電路基礎-組合邏輯電路之4位先行進位加法器

文章目錄 一、問題描述二、verilog源碼三、仿真結果一、問題描述 前面介紹4位行波進位全加器（串行加法器）的原理及verilog實現，但是它是一種串行加法器，當位數多時，比如32位的二進制數相加，由于進位逐位從低位向高位傳遞，這會造成相當大的延遲。對于需要快速加法運算的…
閱讀更多...
shell基本知識

shell基本知識

Linux 系統中 shell 的基本知識 1 什么是 shell Shell 是一種命令行解釋器&#xff0c;它為用戶提供了一個向 Linux 內核發送請求以便運行程序的界面系統級程序。用戶可以用 shell 來啟動、掛起、停止甚至是編寫一些程序。 2 Linux 啟動過程 Linux 系統的啟動過程可以概括為…
閱讀更多...
tomcat篇---第四篇

tomcat篇---第四篇

系列文章目錄 文章目錄 系列文章目錄前言一、為什么我們將tomcat稱為Web容器或者Servlet容器 ？二、tomcat是如何處理Http請求流程的？三、tomcat結構目錄有哪些?前言 前些天發現了一個巨牛的人工智能學習網站，通俗易懂，風趣幽默，忍不住分享一下給大家。點擊跳轉到網站，這…
閱讀更多...
【深度挖掘Java性能調優】「底層技術原理體系」深入挖掘和分析如何提升服務的性能以及執行效率（性能三大定律）

【深度挖掘Java性能調優】「底層技術原理體系」深入挖掘和分析如何提升服務的性能以及執行效率（性能三大定律）

深入挖掘和分析如何提升服務的性能以及執行效率 前提介紹知識要點 性能概述教你看懂程序的性能案例介紹性能指標性能的參考指標性能瓶頸&#xff08;木桶原理&#xff09; 性能分析三大定律Amdahl定律計算公式參數解釋案例分析定律總結 Gustafson定律與Amdahl定律相對立Gustafs…
閱讀更多...
有理函數的積分

有理函數的積分

1.多項式相除法&#xff1a; 2.分子分母次數帶來的解題思路差異&#xff1a; 1.總體目的&#xff1a;降次 2.分子次數高于分母&#xff0c;采用多項式相除 3.分子次數等于分母&#xff0c;分離常數 4.最終形式&#xff1a;分子次數低分母次數高 3.不同形式的計算方法 4.按類拆…
閱讀更多...
51單片機數碼管的使用

51單片機數碼管的使用

IO的使用2–數碼管 本文主要涉及51單片機的數碼管的使用 文章目錄 IO的使用2--數碼管一、數碼管的定義與類型1.1 數碼管的原理圖二、 舉個栗子2.1 一個數碼管的底層函數2.2 調用上面的底層函數顯示具體數字 一、數碼管的定義與類型 數碼管是一種用于數字顯示的電子元件&#x…
閱讀更多...
[強網擬態決賽 2023] Crypto

[強網擬態決賽 2023] Crypto

文章目錄 Bad_rsaClasslcal Bad_rsa 題目描述&#xff1a; from Crypto.Util.number import *f open(flag.txt,rb) m bytes_to_long(f.readline().strip())p getPrime(512) q getPrime(512) e getPrime(8) n p*q phi (p-1)*(q-1) d inverse(e,phi) leak d & ((1…
閱讀更多...
mysql select count 非常慢

mysql select count 非常慢

MySQL select count 性能分析 問題&#xff1a;mysql 在count時發現非常慢 select count(*) from xxx; 無論執行多少次&#xff0c;查詢速度基本穩定在10-12秒之間 環境說明 windows11 x64SSD硬盤MySQL8.0.35數據庫引擎為InnoDB數據行數不到3萬行&#xff0c;但是數據量將近…
閱讀更多...
php操作數據庫，用wampserver工具

php操作數據庫，用wampserver工具

php操作數據庫&#xff0c;用wampserver工具 打開wampserver數據庫可視化&#xff0c;創建表格&#xff0c;插入數據 DROP TABLE IF EXISTS user; CREATE TABLE IF NOT EXISTS user (user_Id int NOT NULL AUTO_INCREMENT COMMENT 用戶編號,user_Name varchar(20) CHARACTER S…
閱讀更多...
Pandas中的Series（第1講）

Pandas中的Series（第1講）

Pandas中的Series（第1講） ??????? ??博主 侯小啾 感謝您的支持與信賴。?? ???????????????????????????????????????????????????????????????????????????????????????…
閱讀更多...
挑7 .

挑7 .

輸出 1到n之間 的與 7 有關數字的個數。 一個數與7有關是指這個數是 7 的倍數&#xff0c;或者是包含 7 的數字&#xff08;如 17 &#xff0c;27 &#xff0c;37 … 70 &#xff0c;71 &#xff0c;72 &#xff0c;73…&#xff09; 數據范圍&#xff1a; 1≤n≤30000 輸入描述…
閱讀更多...
深入學習鎖--Synchronized各種使用方法

深入學習鎖--Synchronized各種使用方法

一、什么是synchronized 在Java當中synchronized通常是用來標記一個方法或者代碼塊。在Java當中被synchronized標記的代碼或者方法在同一個時刻只能夠有一個線程執行被synchronized修飾的方法或者代碼塊。因此被synchronized修飾的方法或者代碼塊不會出現數據競爭的情況&#x…
閱讀更多...
Hazel引擎學習（十二）

Hazel引擎學習（十二）

我自己維護引擎的github地址在這里&#xff0c;里面加了不少注釋&#xff0c;有需要的可以看看 參考視頻鏈接在這里 Scene類重構 參考&#xff1a;《InsideUE4》GamePlay架構&#xff08;二&#xff09;Level和World 目前我的Scene類基本只是給entt的封裝&#xff0c;提供了…
閱讀更多...
工業4.0分類：數字化轉型的多維度

工業4.0分類：數字化轉型的多維度

引言 工業4.0代表著制造業的數字化革命&#xff0c;它將制造過程帶入了數字時代。然而&#xff0c;工業4.0并不是一個單一的概念&#xff0c;而是一個多維度的范疇&#xff0c;包括不同的技術、應用領域、企業規模和實施方式。但在這一多維度的概念中&#xff0c;低代碼技術正…
閱讀更多...
如何優雅地使用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<…
閱讀更多...
《三十》模塊化打包構建工具 Rollup

《三十》模塊化打包構建工具 Rollup

19的2小時06分鐘 Rollup 是一個 JavaScript 的模塊化打包工具&#xff0c;可以幫助編譯微小的代碼到龐大的復雜的代碼中&#xff08;例如一個庫或者一個應用程序&#xff09;。 Rollup 和 Webpack 的區別&#xff1a; Rollup 也是一個模塊化的打包工具&#xff0c;但是它主要…
閱讀更多...
排序：非遞歸的快排

排序：非遞歸的快排

目錄 非遞歸的快排&#xff1a; 代碼分析&#xff1a; 代碼演示&#xff1a; 非遞歸的快排&#xff1a; 眾所周知&#xff0c;遞歸變成非遞歸&#xff0c;而如果還想具有遞歸的功能&#xff0c;那么遞歸的那部分則需要變成循環來實現。 而再我們的排序中&#xff0c;我們可…
閱讀更多...
最新文章

Copyright @ 2022~2023