一、制作Unity模型，并导出WebGL

（菜单：File->Build Settings…）进入WebGL选项对话框。在对话框中，从平台列表中选择WebGL，然后选择播放器选项…

导出后，是无法HTML直接打开的，可以用VsCode 的LiveServer插件来预览

个人版本的Unity会有一个启动画面，只有Pro版本才可以去除这个启动画面。

二、装webgl插件

新建一个Vue工程， 安装webgl unity插件

npm i unity-webgl

该插件还提供一系列的通信方法

on(eventName: string, eventListener: function)
once(eventName: string, eventListener: function)
off(eventName: string)
clear()
emit(eventName: string)

create(canvasElement: HTMLCanvasElement | string)
send(objectName: string, methodName: string, params: any)
setFullscreen()
destroy()

三、代码编写

把Unity导出的文件放到public目录下

<template>
    <div>

        <Unity :unity="unityContext" width="800px" height="600px"></Unity>

        <div>采用WASD键进行控制</div>
    </div>
</template>

<script>
    import Vue from 'vue'
    import UnityWebgl from 'unity-webgl'

    Vue.use(UnityWebgl)

    const Unity = new UnityWebgl({
        loaderUrl: 'build/webgl.loader.js',
        dataUrl: "build/webgl.data",
        frameworkUrl: "build/webgl.framework.js",
        codeUrl: "build/webgl.wasm"
    })

    export default {
        name: 'unityPage',
        component: {
            Unity: UnityWebgl.vueComponent
        },
        data() {
            return {
                unityContext: Unity
            }
        }
    }
</script>

<style scoped>

</style>

源工程见Gitee: gitee.com/maquebi/stu…