AFrame gltf loader没有识别我的资产

Question

vue + webpack + aframe开始很好

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

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

对于基本设置，正如您所看到的，它正在按预期工作。

这是不幸福的部分。

对于默认设置，webpack不会让我需要gltf / glb文件。 因此我安装并使用了文件加载器将其烘焙成静态。

这是我在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，该过程遍历了每个步骤，但这可以打包文件。