I'm learning my way around A-Frame and I'm hoping to be able to use with Vue.JS. One problem I'm running into is that I can't seem to load any 3D models when using these two together. I've tried .glb files and .obj files.
When working with plain HTML I can load assets like this.
...
<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>
...
This will load the asset as expected.
When I try something similar in a Vue component I end up with an empty a-entity in my scene with no model showing up. Here is the code.
<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>
My first guess wat that I messed up the path, but the path is valid. I'm able to load other data types such as audio files and images, but not 3D models.
I'm still pretty new to Vue, but I think this has something to do with how Vue is loading assets. I'm using Vue CLI with a new project with minimal changes to the default settings (I just added Router and VueX).
