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

Posted 2023-03-23

【中文标题】AFrame gltf 加载器无法识别我的资产

【英文标题】：AFrame gltf loader not recognizing my assets

【发布时间】：2018-08-13 12:39:24

【问题描述】：

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 文件确实是烘焙和加载的。 但在控制台中，它显示未找到资产。

---

问题：

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

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

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

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

感谢您的耐心等待。

【问题讨论】：

我可以通过将文件放在静态文件夹中来解决这个问题，但这会阻止 webpack 选择唯一需要的。

【参考方案1】：

您需要先删除 GLTF 文件here.

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