使用unity3D实现webGL效果

unityInstance.SendMessage(objectName, methodName, value)

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

var unityInstance = UnityLoader.instantiate("unityContainer", "Build/build.json", {onProgress: UnityProgress})

<template>
    <div class="webgl-content">
        <div
            id="unity-container"
            :style="{
                width: width + 'px',
                height: height + 'px'
            }"
        ></div>
    </div>
</template>

<script>
import Vue from 'vue'
export default {
    name: 'vue-unity-webgl',
    props: ['width', 'height', 'config', 'unityLoader', 'onProgress'],
    data() {
        return {
            instance: null,
            loaded: false
        }
    },
    beforeMount() {
        if (!this.eventBus) {
            this.eventBus = new Vue({
                data: {
                    ready: false,
                    load: false
                }
            })
        }
        if (typeof UnityLoader === 'undefined' && !this.eventBus.load) {
            const script = document.createElement('script')
            script.setAttribute('id', 'vue-unity-webgl-loader')
            script.setAttribute('src', this.unityLoader)
            script.setAttribute('async', '')
            script.setAttribute('defer', '')
            document.body.appendChild(script)
            script.addEventListener('load', () => {
                this.eventBus.ready = true
                this.eventBus.$emit('onload')
            })
        } else {
            this.eventBus.ready = true
        }
        this.eventBus.load = true
    },
    mounted() {
        const instantiate = () => {
            if (typeof UnityLoader === 'undefined') {
                return Promise.reject('UnityLoader 未定义')
            }
            if (!this.config) {
                return Promise.reject('config 未定义配置')
            }
            let params = {}
            params.onProgress = (instance, progress) => {
                this.onProgress && this.onProgress(instance, progress)
                this.loaded = progress === 1
            }
            if (this.module) {
                params.Module = this.module
            }
            this.instance = UnityLoader.instantiate('unity-container', this.config, params)
        }
        if (this.eventBus.ready) {
            instantiate()
        } else {
            this.eventBus.$on('onload', () => {
                instantiate()
                this.$emit('onload')
            })
        }
    },
    methods: {
        message(object, method, params) {
            if (params === null) {
                params = ''
            }
            if (this.instance !== null) {
                this.instance.SendMessage(object, method, params)
            } else {
                return Promise.reject('vue-unity-webgl: 你给 Unity 发送的信息， 没有被接收到')
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.webgl-content {
    border-radius: 5px;
    text-align: center;
}
#unity-container {
    display: inline-block;
    border-radius: 5px;
}
</style>

<template>
    <div id="webgl-box-warpper" v-loading="is_loading">
        <vue-unity-webgl
            v-if="is_show_webgl"
            ref="vueUnityWebgl"
            :config="webglConfig"
            :unity-loader="webglUnityLoader"
            :width="webglWidth"
            :height="webglHeight"
            :on-progress="listenWebglProgress"
        ></vue-unity-webgl>
    </div>
</template>

<script>
import VueUnityWebgl from '@/components/vue-unity-webgl'
export default {
    components: {
        VueUnityWebgl
    },
    data() {
        return {
            is_loading: false,
            is_show_webgl: true,
            webglConfig: '/Scenes1/Build/Scenes1.json',
            webglUnityLoader: '/Scenes1/Build/UnityLoader.js'
            webglWith: 1000,
            webglHeight: 600
        }
    },
    created() {
        window.toVueWebgl = (action) => {
            action && this.sendWebglMessage('{}', '第二次发送JSON数据')
        }
    },
    mounted() {
        window.ReportReady = () => {
            this.sendWebglMessage('1', '第一次发送内容标识')
        }
    },
    methods: {
        listenWebglProgress(instance, progress) {
            this.is_loading = true
            if (progress === 1) {
                this.is_loading = false
            }
        },
        sendWebglMessage(message, info) {
            console.log(info)
            this.$refs.vueUnityWebgl.message('JsTalker', 'toUnityWebgl', message)
        }
    }
}
</script>