Unity3D模型在vue项目中的使用

Unity3D模型在vue项目中的使用

一、创建三维模型容器

三维模型开发人员会导出一个三维包拱前端使用，相关文件要放在public文件下面，或者放在服务器上，根据服务器地址修改配置文件地址即可。

 <div id="unity-container" class="unity-desktop">
    <canvas id="unity-canvas" width="1920" height="1080"></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-warning"></div>
    <div id="unity-footer">
      <div id="unity-webgl-logo"></div>
      <div id="unity-fullscreen-button"></div>
      <div id="unity-build-title">City Engine</div>
    </div>
  </div>

二、依照示例，创建三维模型的容器并且添加配置，并且初始化u3d

最新三维包结构如图：

// 这里对应的结构是初始化时创建的dom,放在mounted()里面执行
this.container = document.querySelector('#unity-container')
this.canvas = document.querySelector('#unity-canvas')
this.loadingBar = document.querySelector('#unity-loading-bar')
this.progressBarFull = document.querySelector('#unity-progress-bar-full')
this.fullscreenButton = document.querySelector('#unity-fullscreen-button')
this.warningBanner = document.querySelector('#unity-warning')

this.buildUrl = '/HuZhouAnJi/Build'
this.loaderUrl = this.buildUrl + '/HuZhouAnJi.loader.js'
this.config = {
  dataUrl: this.buildUrl + '/HuZhouAnJi.data',
  frameworkUrl: this.buildUrl + '/HuZhouAnJi.framework.js',
  codeUrl: this.buildUrl + '/HuZhouAnJi.wasm',
  streamingAssetsUrl: 'StreamingAssets',
  companyName: 'companyName',// 自己取
  productName: 'productName', //自己取
  productVersion: '0.1',
  showBanner: this.unityShowBanner(),
}

this.canvas.style.width = this.w/this.m+'px' //这里三维模型是按照1920*1080进行开发，也可以根据自己的需求调整
this.canvas.style.height = '1080px'

this.loadingBar.style.display = 'block'

let script = document.createElement('script')
script.src = this.loaderUrl
console.log(this.loaderUrl)
this.unityInstance = null
script.onload = () => {
  createUnityInstance(this.canvas, this.config, progress => {
    this.progressBarFull.style.width = 100 * progress + '%'
  })
    .then(unityIns => {
      this.unityInstance = unityIns
      this.loadingBar.style.display = 'none'
      this.fullscreenButton.onclick = () => {
        this.unityInstance.SetFullscreen(1)
      }
    })
    .catch(message => {
      alert(message)
    })

}
document.body.appendChild(script)

unityShowBanner(msg, type) {
   let that = this
   var div = document.createElement('div')
   div.innerHTML = msg
   this.warningBanner.appendChild(div)
   if (type == 'error') div.style = 'background: red; padding: 10px;'
   else {
     if (type == 'warning') div.style = 'background: yellow; padding: 10px;'
     setTimeout(function () {
       // this.warningBanner.removeChild(div)
       that.updateBannerVisibility()
     }, 5000)
   }
   that.updateBannerVisibility()
 },
 updateBannerVisibility() {
   this.warningBanner.style.display = this.warningBanner.children.length ? 'block' : 'none'
 },

三、接收回调

this.$nextTick(()=>{
  //接收unity发送的消息并广播消息
  window.ReceiveFromUnity = function (msg) {
    var initD = {
      detail: { hazcheeseburger: true },
      bubbles: true,
      cancelable: true,
      composed: true,
    }
    var evt = new CustomEvent(msg, initD)
    //广播unity发出的事件
    window.top.dispatchEvent(evt)
    // console.log(JSON.parse(evt.type),'回调')
    let info = JSON.parse(evt.type)
    if (JSON.parse(evt.type).type === 'ToWeb_System_Startup') {   // 通过判断不同的接口类型，配置对应回调的响应事件
	
    }
  }
})

四、与三维模型通信

//发送消息至Unity
sendToUnity(msg) {
  if (msg === null) {
    msg = ''
  }
  if (this.unityInstance !== null) {
    this.unityInstance.SendMessage('UnityWeb', 'ReceiveFromWeb', msg)
  }
}

五、使用示例

let changePoint = {
  "type": "To3d_Icon2D_Generate", // 这是我们协定的添加2D点位接口
  "data": {
    "id":'1',
     iconState:'default'
  }
}
this.sendToUnity(JSON.stringify(changePoint))

其他的接口使用基本就按照这个格式使用就行，具体的接口，需要三维开发人员提供接口文档进行开发。