Unity3D打包成webgl和前端vue交互
【摘要】 1.unity部分在assets目录的Plugins文件夹新建一个文档文字随便命名，后缀名改为xxxx.jslib在里面写入这样一段代码mergeInto(LibraryManager.library, { SendMsgToVue: function (msg) { TestSend(Pointer_stringify(msg)) //新的unity版本Pointer_...
1.unity部分
在assets目录的Plugins文件夹新建一个文档文字随便命名，后缀名改为xxxx.jslib
在里面写入这样一段代码
mergeInto(LibraryManager.library, {
SendMsgToVue: function (msg) {
TestSend(Pointer_stringify(msg)) //新的unity版本Pointer_stringify，改为UTF8ToString
console.log("SendMsgToVue msg=="+msg)
},
ReportReady: function () {
window.ReportReady()
},
})
SendMsgToVue这是需要在unity里面调用的，用来unity给vue发送消息
TestSend需要在打包生成webgl后在index.html里面调用的
然后，在unity新建一个脚本文件
2.vue部分
<template>
<view class="content">
<button @click="donghua">点击动画</button>
<iframe ref="iframe" src="/static/index.html"
class="iframe" frameborder="0" scrolling="yes" name="iframe" seamless
style="width: 100%;height: 600px;">您的浏览器版本过低，无法显示报表内容！建议升级浏览器或更换浏览器！</iframe>
</view>
</template>
<script>
export default {
data() {
return {
title: 'Hello'
}
},
onLoad() {
},
methods: {
donghua(){
this.$refs.iframe.contentWindow.dodonghua()
}
}
}
</script>
<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.logo {
height: 200rpx;
width: 200rpx;
margin-top: 200rpx;
margin-left: auto;
margin-right: auto;
margin-bottom: 50rpx;
}
.text-area {
display: flex;
justify-content: center;
}
.title {
font-size: 36rpx;
color: #8f8f94;
}
</style>
3.打包的index.html部分
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Unity WebGL Player | LuoYangU3DProject</title>
<link rel="shortcut icon" href="TemplateData/favicon.ico">
<link rel="stylesheet" href="TemplateData/style.css">
</head>
<body>
<div id="unity-container" class="unity-desktop">
<canvas id="unity-canvas"></canvas>
<div id="unity-loading-bar">
<div id="unity-logo"></div>
<div id="unity-progress-bar-empty">
<div id="unity-progress-bar-full"></div>
</div>
</div>
<div id="unity-footer">
<div id="unity-webgl-logo"></div>
<div id="unity-fullscreen-button"></div>
<div id="unity-build-title">LuoYangU3DProject</div>
</div>
</div>
<script>
var g_unityInstance=null;
var buildUrl = "Build";
var loaderUrl = buildUrl + "/BoxCeShi.loader.js";
var config = {
dataUrl: buildUrl + "/BoxCeShi.data",
frameworkUrl: buildUrl + "/BoxCeShi.framework.js",
codeUrl: buildUrl + "/BoxCeShi.wasm",
streamingAssetsUrl: "StreamingAssets",
companyName: "DefaultCompany",
productName: "LuoYangU3DProject",
productVersion: "0.1",
};
var container = document.querySelector("#unity-container");
var canvas = document.querySelector("#unity-canvas");
var loadingBar = document.querySelector("#unity-loading-bar");
var progressBarFull = document.querySelector("#unity-progress-bar-full");
var fullscreenButton = document.querySelector("#unity-fullscreen-button");
if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
container.className = "unity-mobile";
config.devicePixelRatio = 1;
} else {
canvas.style.width = "960px";
canvas.style.height = "600px";
}
loadingBar.style.display = "block";
var script = document.createElement("script");
script.src = loaderUrl;
script.onload = () => {
createUnityInstance(canvas, config, (progress) => {
progressBarFull.style.width = 100 * progress + "%";
}).then((unityInstance) => {
loadingBar.style.display = "none";
g_unityInstance=unityInstance;//复制给一个全局变量
fullscreenButton.onclick = () => {
unityInstance.SetFullscreen(1); //点击按钮全屏显示
unityInstance.SendMessage("Cube", "OnPlayRota",1); //点击按钮旋转方块
// unityInstance.SendMessage("Cube", "OnPlayRota",0); //点击按钮停止方块
};
}).catch((message) => {
alert(message);
});
};
document.body.appendChild(script);
function dodonghua(){
console.log('click do donghua')
g_unityInstance.SendMessage("Cube", "OnPlayRota",1); //点击按钮旋转方块
}
</script>
</body>
</html>
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）