aframe 资产未在 nuxt.js 中加载 gltf答案

【问题标题】：aframe assets not loading gltf in nuxt.jsaframe 资产未在 nuxt.js 中加载 gltf
【发布时间】：2021-08-04 05:01:41
【问题描述】：

当我使用asset management system 在nuxt.js 中加载.gltf 模型时，网络选项卡显示文件已加载，但控制台抛出错误：

core:propertyTypes:warn "#cityModel" asset not found.

这是一个显示行为的最小可重现示例：

注意：（这是vue，因为我不知道如何在codepen上快速设置nuxt，但行为完全相同）

https://codepen.io/onewaveadrian/pen/gOmrwGY

    <template>
      <div id="app">
        <a-scene>
          <a-assets>
            <a-asset-item
              id="cityModel"
              src="https://cdn.aframe.io/test-models/models/glTF-2.0/virtualcity/VC.gltf"
            ></a-asset-item>
            <a-asset-item
              id="officeclip"
              src="https://media.giphy.com/media/IwAZ6dvvvaTtdI8SD5/giphy.mp4"
            ></a-asset-item>
          </a-assets>
          <a-entity camera look-controls position="0 1.6 0"></a-entity>
          <!-- Load via URL -->
          <a-video
            src="url(https://media.giphy.com/media/IwAZ6dvvvaTtdI8SD5/giphy.mp4)"
            width="16"
            height="9"
            position="0 2 -4"
            scale="0.1 0.1 0.1"
          ></a-video>
          <a-entity gltf-model="url(https://cdn.aframe.io/test-models/models/glTF-2.0/virtualcity/VC.gltf)" scale="0.01 0.01 0.01" position="0 1 -4" />
          <a-text position="-1 2.6 -4" text="value:  URL Loaded!;  color:  #000000"></a-text>
          <!-- Load via Asset Management -->
          <a-video
            src="#officeclip"
            width="16"
            height="9"
            position="2 2 -4"
            scale="0.1 0.1 0.1"
          ></a-video>
          <a-entity gltf-model="#cityModel" scale="0.01 0.01 0.01" position="2 1 -4"></a-entity>
          <a-text position="1 2.6 -4" text="value:  Asset Management Loaded!;  color:  #000000"></a-text>
        </a-scene>
      </div>
    </template>

    <script>
      import * as aframe from "https://cdn.skypack.dev/aframe@1.2.0";
      export default {};
    </script>

    <style></style>

到目前为止，我最好的猜测是，这是 webpack 加载器配置问题，因为 .mp4 加载得很好？如果是，我该如何修复它以通过资产管理器加载？还有为什么它使用直接 URL 加载而不是通过资产管理器加载？

【问题讨论】：

标签： .gltf nuxt.js vue nuxt webpack nuxt.js assets aframe gltf

【解决方案1】：

我不确定 vue 渲染是如何工作的（按顺序），但似乎在解析 gltf-model 架构时，HTML 节点 #cityModel 确实不存在于 DOM 中。

你可以

修改gltf-model组件以检查init函数中的节点，或者
等到所有内容都安装完毕，然后通过setAttribute() 添加gltf-model

codepen 带有一个简单的超时：

setTimeout( e => element.setAttribute("gltf-model", "#model")):

【讨论】：

这在使用 $ref 的 mounted 生命周期钩子以 Vue 方式应用时效果很好。请参阅updated codepen 以了解实施感谢您的提示。但是我仍然不明白为什么原始示例可以毫无问题地使用视频纹理，而只是 gltf 不会加载。也许文件大小是关键的区别？视频恰好在 gltf 之前加载，因此在 DOM 组件请求时可用？
一旦所有gltf 文件加载完毕，资产管理器就会发送loaded event。但是，不包含纹理！因此，如果gltf-文件从服务器请求更多纹理，因此模型无法显示，但一旦网格本身加载，它仍然算作加载，因此崩溃......
我不认为它与正在加载的资产有关。当 document.getElementById() 查询失败时，日志 asset not found 为 only present - 当没有与查询对应的 HTML 节点时会发生这种情况。