Unity WebGL Vue

Vue项目内嵌WebGL

基于vue-element-admin开发,使用Unity2020.3.1。
不了解前端项目,当时随便找了一个前端框架,这个框架值得学习,但是不适合新手开发(反正我是在痛苦中改成自己需要的),后来在文档中也注意到,作者已经说明,不适合二次开发,可以使用vue-admin-template进行开发。今天打包上传服务器,后续有空,把功能移到vue-admin-templete。

一、Unity WebGL

WebGL文档 2020.3

1. C#和js交互

自行查看官方文档和示例,由于我没有使用到太多交互,故省略。
在我的项目中,只是从 Js向Unity传递信息,调用C#,可以参考官方文档,主要的方法如下:

unityInstance.SendMessage('MyGameObject', 'MyFunction');
unityInstance.SendMessage('MyGameObject', 'MyFunction', 5);
unityInstance.SendMessage('MyGameObject', 'MyFunction', 'MyString');

对于unityInstance,如果需要在全局中调用,可以将其缓存,在build出来的index.html中对自己定义的unityInstance进行赋值。

2. 打包设置

依旧看文档(哈哈),主要注意的地方是 Publishing Settings
Publishing Settings
这里用的是Gzip压缩,开启Decompression Fallback。这里怎么说呢,比较坑,附个问题解决文章吧!压缩和解压选择
正式打包发布,会遇到 unityFramework 未定义,就是这个解压的问题。关于http请求头和响应头这块,不太了解,不懂的自行查阅,也可以忽略。在官方文档中也有详细的说明和示例,压缩格式选择和服务器相应的配置都有。至于为什么这样,前端同学可能更懂一些,我还不太懂,欢迎留言告知。
我们服务端用的Nginx,所以我也是本地试了好久,关于配置Nginx的响应头,网上文章也好多。
我在nginx.conf中添加如下代码,最后解决。

location ~ .+\.unityweb$ {
            add_header Content-Encoding gzip;
            add_header Content-Type application/octet-stream;
        }

如果没有选择Decompression Fallback的话,打包出来是gz/br后缀,这个配置自行百度吧,我也不是搞后端的。
本地测试没问题后,把最终包丢给服务端,他最终配置的,具体怎么配置不清楚,部署后,正常运行。

二、Vue框架

怎么说呢,一个Untiy开发,来写前端,确实什么也不懂,网上当时就随手找了这个框架,也没怎么看文档,就看效果然后改代码,以后一定先看文档,说多了都是泪。
因为我的需求比较简单,几乎没需求,所以用这个有些大材小用了,不过有空还是可以学习一下前端的。

遇到的问题

前期在本地测试,也没遇到什么大的问题,但是上线后,就不行了,一直报responseType的问题,加上Untiy那个压缩的问题,整了两天,感觉自己快废了。
responseType
这里提到说是mock.js的问题,后来尝试删除了,果然好了,具体原因也不清楚,但是在main.js中也提到,上线之前去掉mock,只怪自己没有看到。

三、Nginx部署

Nginx本地部署
我当时在自己本地测试,同事发我的文章,因为我们服务端用的是这个,没办法,Unity官方文档给了Apache的服务器配置和IIS的配置示例。

四、其他
1. WebGL项目

项目打包后,生成的文件,我是将其放在public下,网上也有放在static下的
Unity项目
Vue项目中,将WebGL生成的index.html 文件里面的复制到vue文件中。(后期继续补充,今天先这样了!)

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
UnityWebGLVue.js是两个不同的技术栈,但它们可以在一定程度上进行交互。UnityWebGL是一个基于WebGL的游戏引擎,主要用于构建高性能的3D游戏和交互内容,而Vue.js是一个流行的前端JavaScript框架,用于构建可复用的组件式单页应用(SPA)。 要让UnityWebGLVue.js交互,通常的做法是: 1. **数据绑定**:Unity可以通过JavaScript API(例如`UnityMessage`系统)来暴露一些数据,Vue.js可以监听这些数据的变化,并更新UI。反之,Vue.js也可以触发数据变化,通知Unity执行相应的操作。 2. **事件处理**:Vue提供了事件系统,可以用来触发Unity内部的逻辑,如动画、场景切换等。Unity可以通过监听特定的DOM事件来响应Vue的指令或组件行为。 3. **Web Workers**:当涉及到计算密集型任务时,可以使用Web Workers将部分工作放到后台运行,减少阻塞主线程,这时Vue.js可以在主线程上更新UI,而Unity在Worker中执行计算。 4. **前端API调用**:Vue.js可以调用Unity提供的JavaScript插件,来进行跨域通信,比如发送数据到服务器或请求Unity进行特定操作。 尽管如此,这种交互不是直接的,而是依赖于一些网络通信机制(如WebSocket或POST请求),并且可能需要对两者的技术特性有深入的理解。 **相关问题:** 1. UnityWebGL如何在浏览器中运行并提供JavaScript API? 2. Vue.js如何利用Event Emitter处理与Unity的交互事件? 3. 如何通过Web Workers在VueUnity之间异步传递数据?

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值