一、webgl打包?

創(chuàng)建一個空項目（或者直接使用現(xiàn)成的項目都可以）這里以該空項目為例子

注意： 如果你的unity項目中有文字，不需要使用unity默認的字體，需要更改它的字體，否則在最后生成的頁面中會顯示不出來文字

好在你的windows在C盤自帶了字體，我這里使用的微軟雅黑來進行了替換，別的字體我沒有測試，可自行嘗試。

點擊file ---》 Building Settings? ?---》 Player Settings? ---》 Publishing Settings 勾選

點擊Build之后進行打包，最終在指定目錄下生成三個文件，打包完成

直接點擊index.html是無法直接運行的，會報錯

這是因為它需要通過一個本地或遠程服務(wù)器（例如通過 http:// 協(xié)議訪問）并占用一個端口來運行。

這里我們除了可以直接使用vscode的 Open with Live Server之外，還可以使用IIS托管這個web服務(wù)器

二、IIS托管Web服務(wù)器

打開 控制面板 ---》 程序 ---》 啟用或關(guān)閉Window功能

將IIS（Internnet Information Services）的全部選項打開

這樣就可以在電腦上找到一個叫IIS管理器的東西

打開之后右鍵網(wǎng)站添加網(wǎng)站

然后再在webgl生成的文件中添加一個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" />
			<remove fileExtension=".mem" />
			<mimeMap fileExtension=".mem" mimeType="application/octet-stream" />
			<remove fileExtension=".data" />
			<mimeMap fileExtension=".data" mimeType="application/octet-stream" />
			<remove fileExtension=".memgz" />
			<mimeMap fileExtension=".memgz" mimeType="application/octet-stream" />
			<remove fileExtension=".datagz" />
			<mimeMap fileExtension=".datagz" mimeType="application/octet-stream" />
			<remove fileExtension=".unity3dgz" />
			<mimeMap fileExtension=".unity3dgz" mimeType="application/octet-stream" />
			<remove fileExtension=".jsgz" />
			<mimeMap fileExtension=".jsgz" mimeType="application/x-javascript; charset=UTF-8" />
			<remove fileExtension=".lua" />
            <mimeMap fileExtension=".lua" mimeType="text/x-lua" />
			<remove fileExtension=".assetbundle" />
            <mimeMap fileExtension=".assetbundle" mimeType="application/octet‐stream" />
			<remove fileExtension=".txt" />
            <mimeMap fileExtension=".txt" mimeType="application/octet‐stream" />
			<remove fileExtension=".manifest" />
            <mimeMap fileExtension=".manifest" mimeType="application/octet‐stream" />
			<remove fileExtension=". " />
            <mimeMap fileExtension=". " mimeType="application/octet‐stream" />
			<remove fileExtension=".*" />
            <mimeMap fileExtension=".*" mimeType="application/octet‐stream" />
			<remove fileExtension="." />
            <mimeMap fileExtension="." mimeType="application/octet‐stream" />
        </staticContent>
        <directoryBrowse enabled="true" />
    </system.webServer>
</configuration>

目錄最后是這這樣的

這樣我們就可以在 http://localhost:8090 這個url中訪問到我們的webgl網(wǎng)頁了?

三、部署至Vue?

在你要展示的vue組件中，使用<iframe>容器來展示這個頁面

<template>
    <iframe src="http://127.0.0.1:8090/" width="1280" height="720" webkitallowfullscreen="true" mozallowfullscreen="true"
        allowfullscreen="true" frameborder="0"></iframe>
</template>

<script setup>

</script>

<style></style>

其中屬性的意思為?

?

然后啟動Vue項目 npm run dev 就可以在這個組件頁面中看到這個webgl頁面了

文章來源地址http://www.zghlxwxcb.cn/news/detail-781635.html

到了這里，關(guān)于將WebGL打包的unity項目部署至Vue中的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！