时间戳

首页 > 解决方案 > 使用 A-Frame 和 Vue.js 加载 3D 模型

vue.js - 使用 A-Frame 和 Vue.js 加载 3D 模型

问题描述

我正在学习围绕 A-Frame 的方法，我希望能够与 Vue.JS 一起使用。我遇到的一个问题是，将这两个模型一起使用时，我似乎无法加载任何 3D 模型。我试过.glb文件和.obj文件。

使用纯 HTML 时，我可以像这样加载资产。

...

<body>

    <a-scene>

        <a-assets>
            <a-asset-item id="apple-obj" src="assets/Apple_Green.obj"></a-asset-item>
            <a-asset-item id="apple-mtl" src="assets/Apple_Green.mtl"></a-asset-item>
        </a-assets>

        <a-entity obj-model="obj: #apple-obj; mtl: #apple-mtl" position="0 1.5 -4"></a-entity>
    </a-scene>

</body>
...

这将按预期加载资产。

当我在 Vue 组件中尝试类似的东西时，我最终a-entity在我的场景中出现了一个空白，没有模型出现。这是代码。

<template>
  <div class="sandbox">
    <a-scene>
      <a-assets>
        <a-asset-item id="apple-obj" src="../assets/Apple_Green.obj"></a-asset-item>
        <a-asset-item id="apple-mtl" src="../assets/Apple_Green.mtl"></a-asset-item>

        <audio id="grey" src="../assets/Gray_noise.mp3"></audio>
      </a-assets>

      <a-entity obj-model="obj: #apple-obj; mtl: #apple-mtl" position="0 1.5 -4"></a-entity>

      <a-sound position="0 -1 -1" src="#grey" autoplay="true" loop="true" on="true"></a-sound>

      <a-sky color="#fff"></a-sky>
    </a-scene>
  </div>
</template>

在此处输入图像描述

我的第一个猜测是我弄乱了路径，但路径是有效的。我能够加载其他数据类型，例如音频文件和图像，但不能加载 3D 模型。

我对 Vue 还是很陌生，但我认为这与 Vue 加载资产的方式有关。我将 Vue CLI 与一个新项目一起使用，对默认设置的更改很少（我刚刚添加了路由器和 VueX）。

标签： vue.jsaframewebvr

解决方案

推荐阅读