AFrame gltf 加载器无法识别我的资产

Question

vue+webpack+aframe 起步不错

嗨！我正在尝试使用 vuejs 构建一个包含 gltf 模型的场景。

我的项目是使用带有 webpack 模板的 vue cli 设置的。

对于基本设置，如您所见，它按预期工作。

这是不开心的部分。

对于默认设置，webpack 不会让我需要 gltf/glb 文件。 因此我已经安装并使用了 file-loader 来将它烘焙成静态的。

这是我在 webpack.config.js 中更改的部分。

{
        test: /\.(glb)(\?.*)?$/,
        use: [{
          loader: 'file-loader',
          options: {}
        }]
},

并且在.vue文件中，我已经使用vue来动态加载了。

  data () {
    return {
      img: require('../assets/NormalTangentTest.glb')
    }
  }

最后，对于 html，我使用了 Aframe 0.7 doc 中的语法，并使用 v:bind 将 src 绑定到我的本地资产。

<a-scene>
  <a-assets>
    <a-asset-item id="tree" :src="img')"></a-asset-item>
  </a-assets>
  <a-entity gltf-model="#tree"></a-entity>
</a-scene>

这是我使用 npm dev server 和 python http.server 得到的。

gltf 文件确实是烘焙和加载的。 但在控制台中，它显示未找到资产。

---

问题：

1. 如何让 webpack 打包正确的文件？

2. 有没有更好的方法来加载 gltf 并且它依赖于文件加载器的纹理？

3. 对于 vue/webpack 设置，在 aframe 中处理资产管理的最佳方式是什么？

4. 我应该只使用 nginx 托管静态文件还是使用绝对路径来链接我放置 gltf 文件的文件夹？

感谢您的耐心等待。

Answer 1

您需要先删除 GLTF 文件here.

我有一个稍微详细一点的过程here，它会遍历每个步骤，但这将允许打包文件。