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

Question

当我使用 asset management system to load a .gltf model in nuxt.js 时，网络选项卡显示文件已加载，但控制台抛出错误：

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

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

Note: (This is in vue as I don't know how to quickly setup nuxt on codepen, but the behaviour is exactly the same)

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 而不是通过资产管理器加载？

Answer 1

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

你可以

修改gltf-model组件检查init函数中的节点，或
等到所有安装完成，然后通过 setAttribute()

gltf-model

codepen 简单超时：

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

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

aframe assets not loading gltf in nuxt.js

webpack

nuxt.js

assets

aframe

gltf