unity webgl 嵌入vue中

最新推荐文章于 2024-10-11 13:39:05 发布

happyz98

最新推荐文章于 2024-10-11 13:39:05 发布

阅读量6.4k

点赞数

分类专栏：前端学习 unity学习文章标签： unity vue.js javascript webgl 前端

本文链接：https://blog.csdn.net/weixin_44373409/article/details/121509106

版权

unity学习同时被 2 个专栏收录

9 篇文章 5 订阅

订阅专栏

前端学习

3 篇文章 1 订阅

订阅专栏

本文介绍了如何在Vue项目中嵌入Unity WebGL内容，通过iframe解决vue-unity-webgl插件安装失败的问题。将Unity导出的webgl页面放入Vue的public静态文件夹，然后在Vue组件中使用iframe标签加载。这种方法允许独立显示Unity内容，并能调整iframe的样式以适应页面布局。同时，提到了未来将探讨iframe与Vue页面交互的实现。

摘要由CSDN通过智能技术生成

之前有一个项目是要把在unity做的虚拟工厂嵌到管理系统里去，也就是unity进行webGl导出，然后嵌入到前端项目中。我们的前端项目是用VUE搭的。
原先尝试了安装vue-unity-webgl插件，但是失败了。最后我们用iframe实现了。方式很简单，iframe是自带的网页标签，直接使用就好。

    <iframe 
    id="unity-infame" 
    ref="iframeDom" 
    src="/static/newtest/index.html" 
    frameborder="0" 
    scrolling="no"
     width= "100%" height="100%"></iframe>

原理就是iframe相当于一个独立的window容器，通过链接的形式的引入unity页面，在设定好的iframe内容中显示对应的网页内容，即使该页面中引用了全局的方法也不会对vue网页有影响。
src我用的是相对地址，对应的从unity中导出的webgl内容整个放入了vue项目的public的static文件夹中。
在这里插入图片描述
用vue可以跑webgl页面，我在之前一篇博客说明了unity webgl 运行浏览器 vue 服务器，大家可以参考一下。
src也可以导出网络上其他服务器的内容，比如你输入www.baidu.com也是可以的。这种方式可以方便进行多项目联动。对于iframe内容显示的大小范围等你可以自己通过标签属性和css来设置网页样式。
这里对于ref要说明，如果要进行iframe内容与vue页面交互，则需要通过它实现，我会在另一篇博客对这个问题进行详细说明。