Displaying aframe results in: IO3D is not defined

Question

When trying to embed the demo-scene: https://3d.io/docs/api/1/aframe-components.html - i receive this error:

Uncaught (in promise) ReferenceError: IO3D is not defined
    at i.update (3dio.js:13912)
    at i.updateProperties (component.js:267)
    at HTMLElement.value (a-entity.js:539)
    at e (a-entity.js:513)
    at Array.forEach (<anonymous>)
    at HTMLElement.value (a-entity.js:495)
    at a-entity.js:306
    at a-node.js:117
    at <anonymous>

Library is loaded. I can successully call f.e.
IO3D.utils.services.call('Model.search', {...})

So i feel like missing sth really basic for displaying a-frame-components?

My env:
https://3d.io 1.0.0-beta.22 (@master #274adf0 2017/08/02 10:16)
THREE.WebGLRenderer 84
A-Frame Version: 0.6.0 (Date 30-06-2017, Commit #34d1988)
WebVR Polyfill Version: ^0.9.35

Edit:
Adding the lib via script tag did the trick!
Thanks a lot to @geekonaut!

@geekonaut Thanks for your quick response. Not that easy. I try to render the a-frame-components in a react-component. Added the lib via npm and imported it like `import * as IO3D from '3dio/build/3dio'` which works well for api-requests. Added the aframe-lib in the header: ``. Webpack throws a critial error regarding iconv-loader which is a dependancy of 3dio: `./node_modules/encoding/lib/iconv-loader.js Critical dependency: the request of a dependency is an expression` Maybe this is the problem? — meme, Aug 02 '17 at 18:06
Shouldn't be a problem is there any console messages saying that aframe was to found and the components have been disabled? Try loading the library separately via script tag *after* aframe is loaded to see if it makes a difference? — geekonaut, Aug 02 '17 at 18:15
it definitely isn't coming from io3d, we're not having that as a a dependency. I'd try to load io3d.js via script tag after aframe and see if I that makes a difference. And check for console logs regarding disabled aframe.io features. — geekonaut, Aug 03 '17 at 05:23
Thanks a lot @geekonaut! Adding the lib via script tag did the trick! — meme, Aug 03 '17 at 05:26
Please accept the answer if it solved your problem. More info: https://stackoverflow.com/help/someone-answers — Agost Biro, Aug 11 '17 at 14:51

score 4 · Answer 1 · answered Aug 03 '17 at 06:36

If you are using the npm version of io3d, make sure to import A-Frame before you load io3d.

There should be a message in the console hinting at the behaviour: AFRAME library not found: related features will be disabled.

As the library can be used on both server- and client-side, it detects if A-Frame is present and only registers the components if that's the case.

Displaying aframe results in: IO3D is not defined

1 Answers1