Загрузка 3D-моделей с A-образной рамкой и Vue. js - PullRequest
Новая
       42

Загрузка 3D-моделей с A-образной рамкой и Vue. js

0 голосов
/ 06 мая 2020

Я изучаю A-Frame и надеюсь, что смогу использовать с Vue. JS. Одна проблема, с которой я сталкиваюсь, заключается в том, что я не могу загружать какие-либо 3D-модели при использовании этих двух вместе. Я пробовал .glb файлов и .obj файлов.

При работе с обычным HTML я могу загружать активы, как это. 

...

<body>

    <a-scene>

        <a-assets>
            <a-asset-item id="apple-obj" src="assets/Apple_Green.obj"></a-asset-item>
            <a-asset-item id="apple-mtl" src="assets/Apple_Green.mtl"></a-asset-item>
        </a-assets>

        <a-entity obj-model="obj: #apple-obj; mtl: #apple-mtl" position="0 1.5 -4"></a-entity>
    </a-scene>

</body>
...

Это загрузит актив, как ожидалось .

Когда я пробую что-то подобное в компоненте Vue, я получаю пустой a-entity в моей сцене без отображения модели. Вот код. 

<template>
  <div class="sandbox">
    <a-scene>
      <a-assets>
        <a-asset-item id="apple-obj" src="../assets/Apple_Green.obj"></a-asset-item>
        <a-asset-item id="apple-mtl" src="../assets/Apple_Green.mtl"></a-asset-item>

        <audio id="grey" src="../assets/Gray_noise.mp3"></audio>
      </a-assets>

      <a-entity obj-model="obj: #apple-obj; mtl: #apple-mtl" position="0 1.5 -4"></a-entity>

      <a-sound position="0 -1 -1" src="#grey" autoplay="true" loop="true" on="true"></a-sound>

      <a-sky color="#fff"></a-sky>
    </a-scene>
  </div>
</template>

enter image description here

Мое первое предположение, что я испортил путь, но путь действителен. Я могу загружать другие типы данных, такие как аудиофайлы и изображения, но не 3D-модели.

Я все еще новичок в Vue, но я думаю, что это как-то связано с тем, как Vue загружает активы. Я использую Vue CLI с новым проектом с минимальными изменениями настроек по умолчанию (я только что добавил Router и VueX).

...