vue3 嵌入unity 3D模型入门教程

实现场景

  在前端开发过程中，需要嵌入3D模型，目前所用的3d模型都是由unity 3d 编译而成的，直接嵌入就可以了。

设计方案

  用iframe直接嵌入unity 3d 的编译包。unity 3d 编译之后，最终会生成js文件。

  首先，将unity 3d 文件，编译之后放入一个和public同级的文件夹，这里命名为model；

  其次，直接用iframe嵌入；查看嵌入的效果；

  最后，将文件打包，放到一个目录下面，需求就达到了。

代码实施

  前端环境主要是在vue3+element-plus的环境下搭建的，主要代码如下：

<script setup>
import { modelList } from '../units/img';
import { onMounted, reactive, ref } from 'vue';
let videoDetail = ref({});
let videos = reactive({ state: false, src: "" });

const showCase = (index) => {
  let tag = 'watch'
  videoDetail.value.src = `${window.origin}/model/index.html?name=${tag}.ab&`;
}

</script>

<template>
  <main>
    <div class="content-3d-button" @click="showCase()">更多模型</div>
    <div>
      <el-dialog v-model="videos.state" title="" :header="null">
        <div style="border-radius: 10px;">
          <iframe :src="videoDetail.src" ref="videoDetail" height="800" width="100%" frameborder="0" scrolling="no"
            style="margin:0 auto;border-radius: 10px;"></iframe>
        </div>


      </el-dialog>
    </div>
  </main>
</template>

遇见问题

  unity 3d 在接收传值时出现问题。

  该问题主要特征是，根据要求传了对应的参数过去，但是模型不显示。主要是过去的数据，用js接收的，用的是window.top获取url路径的。

  主要解决方法，就是将window.top换成window，因为window.top是获取最上面的路由窗口，而iframe在嵌入时是有两个路由的地址的，一个是最外层，一个是本身的地址。 

  unity 3d 在展示时整个模型大小的展示问题。

    当模型页面设置为屏幕一样的高宽时，弹框因为太小，导致页面没有展示出来；因为unity 3d 编译出来的文件屏幕大小固定，所以弹框的宽度没超过时，会将部分页面遮住。

   主要解决方法，是在编译的时候，将unity 3d的页面高宽固定。这样弹框只需要将高宽设置比unity3d稍微大一点就可以了。

  unity 3d 展示框页面高宽针对不同的模型，高宽比问题。

  因为模型创建的大小不一样，有的可能很大，有的可能很小；如，有的一个房子，整个模型就会设计的非常大；而有的模型创建的就比较小。目前是根据不同的传参模型的名称，自动匹配合适的倍数。

  unity 3d 跨域加载模型，出现跨域问题。

  unity 3d 的跨域是软件自带的问题，不能通过浏览器的设置或者服务器的设置来解决。主要是将模型和项目文件放在一个域名下面，这样访问就不存在跨域问题了。

  unity 3d 获取用户参数问题。

    一开始不清楚不喝传递参数，准备用postmessage方法来传递参数，后来发现不需要，unity 3d传参的方法和js的方法都是一样的，用window，这样可以直接通过路由进行传参，页面也没有必要使用的那么复杂；主要出现这个问题，还是对unity 3d不够熟悉。

  unity 3d 文件在.net环境中无法获取文件资源，404报错

        unity 3d在打包之后，会编译成.unityweb格式的文件，这些文件在.net的根目录获取获取不到对应的资源而报错，最终只能通过前后端不共用同一个域名，避开.net的反向代理机制，达到实现的效果。详细的处理过程可以链接一下的地址。

unity .unityweb获取不到使用权限404报错复盘-CSDN博客

收获总结

  开发中遇到问题是常见的，尤其是IT开发中，毕竟很多的场景都是没遇到过的，所以在这个过程中，需要对处理问题形成自己的思维框架。对此，直接借用《管理就是解决问题》中如何搭建思维框架的步骤来搭建。

   1、列出所有问题的特征。

   2、分析可能产生问题的原因，尤其是主要原因。

   3、假设原因存在，提出解决方案。

    4、验证方案