How to use three JS JSON models in A-frame

Gábor 0
Viewed 39

I want to use some low poly models from https://clara.io/ as a ThreeJS JSON model in A-frame. I want to use this because it is much more efficient and smaller than a 3D model, which will load much faster also. But there is no description of how to use it.

As I see there are some other people (1,2,3,4) who have trouble with that but no one suggested any good idea.

So do anybody has a good description or step-by-step guide, or something like that? I tried to use as a script, mentioned in the official description, but didn't worked:

        <a-scene>
        </a-scene>
        <script type="text/javascript">
            var loader = new THREE.ObjectLoader();
                loader.load("globe.json",function ( obj ) {
                     document.getElementsByTagName('a-scene').add( obj );
                });
        </script>

Tried to use it with object loader, but I've got the dependency error module is not defined. So now I'm a bit confused about this,, how to use, or how to start using models in this way. Any suggestion, any idea about this?

aframe three.js json javascript
1 Answers

tldr: afaik JSON models are deprecated, and trying to make them work would mean creating a new loader from scratch.

I'm afraid the best solution is to:

  • download blender
  • download the model in a *.blend format
  • open it up in blender
  • export as glb
  • load it up as a gltf-model.
non - tldr:

Trying to load up a json model via the THREE.ObjectLoader, it tries to use JSONLegacyLoader.
To find it, you need to check out threejs R110 before it was completely removed (loader here).
After all, it needs the deprecated Geometry.
When imported, something crashes in the rendering pipeline. Doesn't look like its worth the effort.

Tried with this model.

Piotr Adam Milewski0
Related