Ability to include files via non-standard (A-Frame) attributes?

[dsinni]

❔ Question

Is it currently possible to include files that are referenced via non-standard HTML attributes into the bundle?

🔦 Context

I do a lot of development in A-Frame, which utilizes many non-standard attributes.

I'm trying to get files referenced by these attributes and properties included. See code sample below.

In A-Frame, many different components (attributes) utilize the src property, as well as many other properties that may accept a file path.

💻 Code Samples

<!-- As a property value of an attribute: -->
<a-entity template="src: ./templates/room.html;"></a-entity>

<a-entity template="src: ./templates/redball.template;"></a-entity>

<a-entity template="src: ./templates/cone.tpl;" data-color="red"></a-entity>

<a-entity material="src: ./textures/rocks.png;"></a-entity>

<a-mixin id="tree" template="src: ./templates/tree.html;"></a-mixin>

<!-- As an attribute value: -->
<a-asset-item id="camera" src="./templates/camera.html"></a-asset-item>

🌍 Your Environment

Software	Version(s)
Parcel	1.9.7
Node	8.2.1
npm/Yarn	npm 6.3.0
Operating System	Windows 10

[dsinni]

Hello. I just noticed that 1.10.0 was available and wanted to check in. Is this now possible with some configuration? I tried with default config and no luck.

Thanks for your time.

[dsinni]

Hello. It's been 6 months since I filed this issue and would really love any insight or direction on this if anyone could spare the time.

Other examples of something like this would be:

<!-- These are assets for A-Frame -->

<!-- 3D Model -->
<a-asset-item id="model" src="./assets/models/model.glb"></a-asset-item>

<!-- Audio -->
<a-asset-item id="bg-music" src="./assets/audio/bg-music.mp3"></a-asset-item>

How can I get these files included in the bundle and referenced correctly?

Since WebVR/WebXR is exploding with popularity right now, it would be great if model formats (as well as other related formats) could be supported by default: gltf, glb, obj, mtl, fbx, etc.

Thanks.

[GuillaumeBAECHLER]

Hello Dan, I'm currently working on a POC project with Aframe / Vue.js / Parcel. I had the same problem including obj files in my builds.

I use an import statement in a js script :

import myObject from '../assets/myObject.obj'

and use it as a source attribute in my template :

<a-asset-item id="my-object" :src="myObject"></a-asset-item>

And it works. If not using Vue.js I would have done this by getting the element by Id and changing the src attribute I guess... not sure if that could work but maybe it can help 😅 I was wondering if you have found a prettier workaround or a solution !

[RadValentin]

I'm stuck in a similar situation, I have multiple A-Frame experiments that I'd like to turn into a website without too much hassle but parcel won't reference them correctly. Has anyone found a way to make this work?

For now I'll try converting my project to ~Vue~ React, hopefully it will work.

[mischnic]

Please follow https://github.com/parcel-bundler/parcel/issues/980 instead

[QuentinPoynter]

I am trying to do the same thing with aframe src. anyone have an idea on how to add this to a plugin? or find any other work arounds?

[QuentinPoynter]

I ended up creating a local plugin that extended HTMLAsset and adds a-asset-item to the list of attributes that produce a dependency.

[Seeingred0]

Hmmm, I ended up importing all objects in a seperate js file. Then used getelementbyID to change the src. However this means I can't load my objects until the HTML DOM is rendered which may not be ideal at scale.

Really want to find a watertight way to load assets with Parcel since there's no point using parcel if we're loading in all the 3D objects with logic!