将WebGL打包的unity项目部署至Vue中

一、webgl打包

创建一个空项目(或者直接使用现成的项目都可以)这里以该空项目为例子

注意: 如果你的unity项目中有文字,不需要使用unity默认的字体,需要更改它的字体,否则在最后生成的页面中会显示不出来文字

好在你的windows在C盘自带了字体,我这里使用的微软雅黑来进行了替换,别的字体我没有测试,可自行尝试。

++点击file ---》 Building Settings ---》 Player Settings ---》 Publishing Settings 勾选++

点击Build之后进行打包,最终在指定目录下生成三个文件,打包完成

直接点击index.html是无法直接运行的,会报错

这是因为它需要通过一个本地或远程服务器(例如通过 http:// 协议访问)并占用一个端口来运行。

这里我们除了++可以直接使用vscode的 Open with Live Server++ 之外,还可以使用++IIS托管这个web服务器++


二、IIS托管Web服务器

打开 控制面板 ---》 程序 ---》 启用或关闭Window功能

将IIS(Internnet Information Services)的全部选项打开

这样就可以在电脑上找到一个叫++IIS管理器++的东西

打开之后右键网站添加网站

然后再在webgl生成的文件中添加一个Web.config文件就行了,代码如下

XML 复制代码
<?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网页了


三、部署至Vue

在你要展示的vue组件中,使用<iframe>容器来展示这个页面

html 复制代码
<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页面了

相关推荐
庖丁解牛5 小时前
3. Babylonjs 中获取相机方向相关
前端·webgl·游戏开发
康康的幸福生活5 小时前
webgl2 方法解析: createBuffer()
前端·javascript·webgl
康康的幸福生活1 天前
webgl2 方法解析: shaderSource()
webgl
魂断蓝桥6662 天前
如何基于three.js(webgl)引擎架构,实现3D医院、3D园区导航,3D科室路径导航
webgl·数字孪生·threejs·3d定位、三维室内定位、3d建筑·three.js路径规划、三维a*算法、javascript三维导航,·3d医院·3d导航·园区导航
康康的幸福生活11 天前
webgl2 方法解析: SCISSOR_TEST
javascript·webgl
魂断蓝桥66613 天前
如何基于three.js(webgl)引擎架构,实现3D机房园区,数据中心消防系统
webgl·数字孪生·three.js·物联网3d·3d机房·、3d工厂、3d工业园区、智慧制造、智慧工业、智慧工厂·bim管理系·3d消防·消防演习模拟
康康的幸福生活15 天前
webgl2 方法解析: colorMask()
webgl
Mapmost15 天前
全新升级!3DTiles加载速度Mapmost完胜Cesium
性能优化·webgl·cesium
康康的幸福生活15 天前
webgl2 方法解析: texImage2D()
webgl
点量云实时渲染-小芹17 天前
UE/Unity/Webgl云渲染推流网址,如何与外部网页嵌套和交互?
unity·webgl·webgl云渲染网页交互·点量云流