mixin with gltf-model using url path does not load

[kfarr]

Description:

• A-Frame Version: 1.4.1
• Platform / Device: Chrome Desktop
• Reproducible Code Snippet or URL:

When defining a gltf-model using url scheme as a mixin, the model does not load. However when using the same syntax without a mixin, the file loads.

      <a-assets>
        <a-mixin id="fire-truck-rig" gltf-model="url(https://assets.3dstreet.app/sets/vehicles-rig/gltf-exports/draco/fire-truck-pumper-rig.glb)"></a-mixin>
      </a-assets>
      <a-entity position="0 0 -9" mixin="fire-truck-rig"></a-entity>

generates console error of:

three.module.js:42746 Uncaught (in promise) TypeError: e.lastIndexOf is not a function
    at nd.extractUrlBase (three.module.js:42746:21)
    at pm.GLTFLoader.load (GLTFLoader.js:174:31)
    at gltf-model.js:44:19
e

Whereas this same syntax without using a mixin works as expected:
<a-entity gltf-model="url(https://assets.3dstreet.app/sets/vehicles-rig/gltf-exports/draco/fire-truck-pumper-rig.glb)"></a-entity>

reproducible here: https://mixin-gltf-url-error.glitch.me/
source: https://glitch.com/edit/#!/mixin-gltf-url-error

[gftruj]

I think that when the mixin caches the properties it parses the url as {"url(https": "//rest/of/the/url)"} (fiddle)

[dmarcos]

a possible workaround. Add the model as a-asset-item instead of inline URL.

[gftruj]

yea, it works like this:

<a-scene>
  <a-assets>
    <a-asset-item id="ftruck-model" src="https://assets.3dstreet.app/sets/vehicles-rig/gltf-exports/draco/fire-truck-pumper-rig.glb"></a-asset-item>
    <a-mixin id="fire-truck-loaded" gltf-model="#ftruck-model"></a-mixin>
  </a-assets>
  <a-entity position="-2 0 -9" mixin="fire-truck-loaded"  scale="0.1 0.1 0.1">
</a-scene>

glitch

[kfarr]

Thanks @gftruj and @dmarcos yes you can use a-asset-item but in this case we already do that for most models and I am purposefully trying to lazy load some assets that are infrequently used such as fire truck.

Also @gftruj your first comment appears to be correct that for whatever reason the gltf-model attribute value is being parsed as a multi attribute instead of a single attribute string, therefore it is treating the ":" symbol in the URL as a separator between property name / value.

Here is the workaround that worked for me and accomplishes the objective of waiting to load the fire truck until it's referenced (removing the https: from the url path)

      <a-assets>
        <a-mixin id="fire-truck-rig" gltf-model="url(//assets.3dstreet.app/sets/vehicles-rig/gltf-exports/draco/fire-truck-pumper-rig.glb)"></a-mixin>
      </a-assets>
      <a-entity position="0 0 -9" mixin="fire-truck-rig"></a-entity>

https://glitch.com/edit/#!/mixin-gltf-url-error-fix?path=index.html%3A6%3A8

This workaround works great for me. Not sure how common this request is for others or if it's worth the effort to fix the behavior here, so ok if you want to close the ticket.

[dmarcos]

It's a bug, we have to fix it. PRs very welcome. I was just offering a temporary workaround.

[kfarr]

Yes makes sense to fix. I dug in a bit to look and my guess so far is this is where the value is being cached, so the issue might be related to this call?
https://github.com/aframevr/aframe/blob/master/src/core/a-mixin.js#L67

it is doing naive string based chunking on :

compare to the asset parser which would be used instead without a mixin:

aframe/src/core/propertyTypes.js

Line 73 in 7050d7b

function assetParse (value) {

it is testing for url(...) syntax

potential other related functions:

aframe/src/utils/styleParser.js

Line 88 in 7050d7b

if (hasUnclosedUrl.test(chunk)) {

[dmarcos]

Yes makes sense to fix. I dug in a bit to look and my guess so far is this is where the value is being cached, so the issue might be related to this call?

Could be. I would put a breakpoint there and check

[dmarcos]

Should be fix on master. Can you verify on master build? Thanks

[kfarr]

Yes confirmed working as expected on latest build, thanks!