lojjic / aframe-troika-text

An A-Frame component for rendering 3D text using troika-three-text
MIT License
71 stars 12 forks source link

`a-asset-item` for `font` not working ? #66

Open dzg opened 1 year ago

dzg commented 1 year ago

Even though I have <a-asset-item id="cfont" src="font.ttf"></a-asset-item> This does not work: <a-troika-text value="Text" font="#cfont"></a-troika-text> Yet this does work: <a-troika-text value="Text" font="font.ttf"></a-troika-text>

dzg commented 1 year ago

I get an error like Failure loading font https:...#font_cambria_ttf; trying fallback TypeError: Cannot read properties of undefined (reading 'unitsPerEm')

It's adding the id to the font URL as if it were an anchor – it's not loading the src of the asset.

msub2 commented 1 year ago

What version of the library are you using?

dzg commented 1 year ago

What version of the library are you using?

Sorry, which library? I'm loading via https://unpkg.com/aframe-troika-text/dist/aframe-troika-text.min.js

And using A-Frame 1.2 via <meta name="8thwall:renderer" content="aframe:1.2.0">

msub2 commented 1 year ago

Hmmm, that version definitely has the fix in it and is still working in my local project. Could you create an example somewhere like https://glitch.com? That'd help give a better view of the whole project and lets others make quick adjustments to it.

dzg commented 1 year ago

it's a huge project on 8th wall .. so I can't really replicate it on another platform.

msub2 commented 1 year ago

Strange, I only seem to be able to get that error when I set the version to an older one (before the fix went in). This could also potentially be a caching issue. Try loading aframe-troika-text with this link instead:

<script src="https://cdn.jsdelivr.net/npm/aframe-troika-text@0.10.0/dist/aframe-troika-text.min.js"></script>
dzg commented 1 year ago

Thanks, but same behavior ... it's trying to load the # as if it were an anchor:

For now, I've written my own component that grabs the correct src URL from the correct a-asset-item.

FWIW ... if I manually grab the code (from line 116) and run it in console:

if (data.font.startsWith('#')) {
     const assetItem = document.querySelector(data.font);
     font = assetItem.getAttribute('src');
   }

... then it works fine!