基于Unity+Vue通信交互的WebGL项目实践

unity-webgl 是无法直接向vue项目进行通信的,需要一个中间者 jslib 文件
jslib当作中间者,unity与它通信,前端也与它通信,在此基础上三者之间进行了通信对接

看过很多例子:介绍的都不是很详细,不如自己写, 注意看箭头走向
在这里插入图片描述

共同点:unity 打包项目都放 在 public 里面
在这里插入图片描述

方式一:通过 ifram 引入 到vue 项目

<iframe ref="iframecc" src="./model/index.html" frameborder="0" allowfullscreen></iframe>

1、unity 通过 jslib 向 html 传递数据:

1、jslib 先传给 ifram

其实就是调用html 里面的方法,回调给我们数据,我们只要写好方法名给jslib即可(unity开发者去写进去),就能收到信息

// 接收来自 jslib 的方法 = >传给vue
function getUnityMessage(str) {// 注意格式-一般是string let message = JSON.parse(str)if(message.id && message.id>=0) {// 向ifram父元素发送数据window.parent.postMessage(message, '*');}else {}}
 2、ifram再传给vue,vue 再接收ifram传递的数据
// 接受来自ifram 的数据
window.addEventListener('message', function(event) {// 确保消息来源可靠,可选// if (event.origin !== 'http://iframepage.com') return;console.log('来自ifram', event.data);// 根据接收到的数据执行相应操作
}, false);

2、vue 向 unity 传递数据

1、先传给ifram 发送消息
let iframecc = ref(null) // ifram -dom
let sendMessage = ()=>{const iframeWindow = iframecc.value.contentWindow;iframeWindow.postMessage('messgae', '*');
}

2、ifram 再传给 jslib

/*SendMessage方法的三个参数依次是@param1 - unity程序中挂载c#脚本的物体的name@param2 - c#脚本实现的接收前段传参的中的函数@param3 - 实际传的参数
*/
window.addEventListener('message', function(event) {// if (event.origin !== 'http://parentpage.com') return;console.log('888:', event.data);window.unityInstance.SendMessage("sendPanel","recvmsg",event.data)
}, false);

备注:SendMessage方法 的来源,我们直接用就行

const script = document.createElement("script");
script.src = loaderUrl;
script.onload = () => {createUnityInstance(canvas, config, (progress) => {spinner.style.display = "none";progressBarEmpty.style.display = "";progressBarFull.style.width = `${100 * progress}%`;}).then((unityInstance) => {// 此处html中, 已经将发送信息的 SendMessage 挂载到了 window 上: window.unityInstance.SendMessage()window.unityInstance = unityInstance;loadingCover.style.display = "none";if (canFullscreen) {if (!hideFullScreenButton) {fullscreenButton.style.display = "";}fullscreenButton.onclick = () => {unityInstance.SetFullscreen(1);};}}).catch((message) => {alert(message);});
};

方式二: vue+通过插件
在这里插入图片描述
链接:参考

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/6181.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【MATLAB源码-第199期】基于MATLAB的深度学习(CNN)数字、模拟调制识别仿真,输出识别率。

操作环境&#xff1a; MATLAB 2022a 1、算法描述 基于深度学习的调制识别系统利用复杂的数学模型和算法来识别和分类从不同来源接收到的无线信号的调制类型。这种技术的应用广泛&#xff0c;特别是在无线通信、电子战、频谱监测和认知无线电等领域中具有重要价值。调制识别系…

算法导论 总结索引 | 第三部分 第十二章:二叉搜索树

1、搜索树数据结构 支持 许多动态集合操作&#xff0c;包括 SEARCH、MINIMUM、MAXIMUM、PREDECESSOR、SUCCESSOR、INSERT 和 DELETE 等。使用搜索树 既可以作为一个字典 又可以作为一个优先队列 2、二叉搜索树上的基本操作 所花费的时间 与这棵树的高度成正比。对于有n个结点的…

汽车热辐射、热传导、热对流模拟加速老化太阳光模拟器系统

汽车整车结构复杂&#xff0c;材料种类繁多&#xff0c;在使用过程中会面临各种严酷气候环境的考验&#xff0c;不可避免会出现零部件材料老化、腐蚀等不良现象&#xff0c;从而影响汽车的外观、功能&#xff0c;甚至产生安全隐患。因此&#xff0c;分析汽车零部件材料老化腐蚀…

深入剖析Tomcat(五) 剖析Servlet容器并实现一个简易Context与Wrapper容器

上一章介绍了Tomcat的默认连接器&#xff0c;后续程序都会使用默认连接器。前面有讲过Catalina容器的两大块内容就是连接器与Servlet容器。不同于第二章的自定义丐版Servlet容器&#xff0c;这一章就来探讨下Catalina中的真正的Servlet容器究竟长啥样。 四种容器 在Catalina中…

音视频入门基础:像素格式专题(1)——RGB简介

一、像素格式简介 像素格式&#xff08;pixel format&#xff09;指像素色彩按分量的大小和排列。这种格式以每个像素所使用的总位数以及用于存储像素色彩的红、绿、蓝和 alpha 分量的位数指定。在音视频领域&#xff0c;常用的像素格式包括RGB格式和YUV格式&#xff0c;本文…

mysql添加远程登录账户

为了远程连接&#xff0c;您必须使MySQL将端口3306绑定到my.cnf中计算机的IP地址。然后&#xff0c;您必须同时在localhost和&#xff05;通配符中创建用户&#xff0c;并在所有DB上授予权限。 修改my.cnf&#xff0c;如果不存在这行则添加&#xff0c;可以输入0.0.0.0 bind-ad…

Java面试题:并发编程中,什么是死锁,如何避免它?

什么是死锁&#xff1f; 死锁是指在多线程环境中&#xff0c;由于资源分配不当或进程运行顺序不合理&#xff0c;导致涉及的线程都处于等待状态&#xff0c;无法继续执行的一种状况。在Java中&#xff0c;死锁通常发生在多个线程互相等待对方持有的锁&#xff0c;但没有任何一…

【海博】雅思该怎么练?

文章目录 前言 备考计划 模拟考试 参考资料 前言 见《【海博】浅析海博深造》 见《【海博】雅思和托福该考哪个&#xff1f;》 见《【海博】雅思该怎么考&#xff1f;》 见《【海博】雅思考什么&#xff1f;》 备考计划 第一周确定你的目标考试分数。 做一套雅思模拟试题&…

npm install报错

总结&#xff1a;没有安装visual studio 2017以上带有C桌面开发的版本 #开始试错 #报错总信息mingw_x64_win版本 百度网盘链接: link 提取码&#xff1a;3uou #尝试用mingw配置个C编译器&#xff0c;并配置环境变量&#xff0c;失败 #只认可使用VS!GIthub原址: 链接: link 上…

python公务用车医院校园企业车辆管理系统

本 Python版本&#xff1a;python3.7 前端&#xff1a;vue.jselementui 框架&#xff1a;django/flask都有,都支持 后端&#xff1a;python 数据库&#xff1a;mysql 数据库工具&#xff1a;Navicat 开发软件&#xff1a;PyCharm 公务用车管理智慧云服务监管平台有管理员和用户…

java中的字节流和File类

目录 正文&#xff1a; 1.File类 1.1概述 1.2常用方法 2.FileInputStream 2.1概述 2.2常用方法 3.FileOutputStream 3.1概述 3.2常用方法 总结&#xff1a; 正文&#xff1a; 1.File类 1.1概述 File类是Java中用来表示文件或目录的类&#xff0c;它提供了一系列方…

【项目学习01_2024.05.02_Day04】

学习笔记 4 课程分类查询4.1需求分析4.2 接口定义4.3 接口开发4.3.1 树型表查询4.3.2 开发Mapper 4 课程分类查询 4.1需求分析 有课程分类的需求 course_category课程分类表的结构 这张表是一个树型结构&#xff0c;通过父结点id将各元素组成一个树。 利用mybatis-plus-gen…

Sass语法---sass的安装和引用

什么是Sass Sass&#xff08;英文全称&#xff1a;Syntactically Awesome Stylesheets&#xff09; Sass 是一个 CSS 预处理器。 Sass 是 CSS 扩展语言&#xff0c;可以帮助我们减少 CSS 重复的代码&#xff0c;节省开发时间。 Sass 完全兼容所有版本的 CSS。 Sass 扩展了…

centos7安装真的Redmine-5.1.2+ruby-3.0.0

下载redmine-5.1.2.tar.gz&#xff0c;上传到/usr/local/目录下 cd /usr/local/ tar -zxf redmine-5.1.2.tar.gz cd redmine-5.1.2 cp config/database.yml.example config/database.yml 配置数据连接 #编辑配置文件 vi config/database.yml #修改后的内容如下 product…

【介绍下Apache的安装与目录结构】

&#x1f3a5;博主&#xff1a;程序员不想YY啊 &#x1f4ab;CSDN优质创作者&#xff0c;CSDN实力新星&#xff0c;CSDN博客专家 &#x1f917;点赞&#x1f388;收藏⭐再看&#x1f4ab;养成习惯 ✨希望本文对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提出…

使用python遍历各个文件夹下以docx为后缀的文件并移动到指定的文件夹

使用python遍历各个文件夹下以docx为后缀的文件并移动到指定的文件夹 import os import shutilsource_directory "./" # 源文件夹路径 destination_directory "../word" # 目标文件夹路径 file_extension ".docx" # 文件后缀名# 遍历源文…

Vitis HLS 学习笔记--MAXI手动控制突发传输

目录 1. 简介 2. MAXI 突发传输详解 2.1 突发传输的前置条件 2.2 hls::burst_maxi 详解 2.2.1 基本知识 2.2.2 hls::burst_maxi 构造函数 2.2.3 hls::burst_maxi 读取方法 2.2.4 hls::burst_maxi 写入方法 2.3 示例一 2.4 示例二 3. 总结 1. 简介 这篇文章探讨了在…

深入剖析序列的特殊方法

协议和鸭子类型 开始之前,我先介绍协议和鸭子类型。在Python中创建功能完善的序列类型无需继承,实现符合序列协议的方法即可。那么说的协议是什么呢? 在面向对象编程中,协议是非正式的接口,只在文档中定义,不在代码中定义。例如:Python的序列协议只要实现__len__和__g…

Python版本管理工具-pyenv

Pyenv是一个Python版本管理工具。 Pyenv允许用户在同一台机器上安装多个版本的Python&#xff0c;并能够轻松切换使用这些版本。 一、安装 Mac下直接使用Homebrew安装 # 更新 Homebrew 的软件列表 brew update # 安装pyenv brew install pyenv# 验证是否安装成功 pyenv -v# …

React框架是什么

react是一个用于构建用户界面的javaScript库&#xff0c;起源于facebook的内部项目&#xff0c;后续在13年开源了出来 声明式 你只需要描述UI看起来是什么样式&#xff0c;就跟写HTML一样&#xff0c;React负责渲染UI 基于组件 组件时React最重要的内容&#xff0c;组件表示…