Three js - JSON loader works in example but not in my code?

Question

Im just trying to load in a model with animations from blender to three js. So Im trying to copy http://stemkoski.github.io/Three.js/Model-Animation.html

I downloaded his code, and he uses:

var jsonLoader = new THREE.JSONLoader();
        jsonLoader.load( "models/android-animations.js", addModelToScene );
        // addModelToScene function is called back after model has loaded

        var ambientLight = new THREE.AmbientLight(0x111111);
        scene.add(ambientLight);

    }

    function addModelToScene( geometry, materials ) 
    {
        // for preparing animation
        for (var i = 0; i < materials.length; i++)
            materials[i].morphTargets = true;

        var material = new THREE.MeshFaceMaterial( materials );
        android = new THREE.Mesh( geometry, material );
        android.scale.set(10,10,10);
        scene.add( android );
    }

Granted Im working in node JS, but I get error JSONLoader has been removed when I do:

var jsonLoader = new THREE.JSONLoader();
jsonLoader.load( "./src/scripts/elements/android-animations.js", this.addModelJson);

Ive tried FBXLoader, ObjectLoader, everything. I can load models but not models with animations. Is this the only solution?

If JSONLoader doesn't exist anymore, how can I load in a model with an animation from blender?

UPDATE:

this is undefined when I use LegacyJSONLoader like this:

var jsonLoader = new THREE.LegacyJSONLoader();
jsonLoader.load( "./src/scripts/elements/android-animations.js", this.addModelJson);

addModelJson( geometry, materials, scene )
  {
    // for preparing animation
    for (var i = 0; i < materials.length; i++)
        materials[i].morphTargets = true;

    var material = new THREE.MeshFaceMaterial( materials );
    var android = new THREE.Mesh( geometry, material );
    android.scale.set(10,10,10);

    this.scene.add( android );
  }

You should see which version of `three` that guy is using in his example. My guess is that's much older (or newer) than yours. In addition, do you mean `new THREE.AmbientLight('0x111111');` — mwilson, Sep 17 '19 at 21:59
@mwilson if Im on an updated version and Ive tried fbx animation mixer, what have you used to import animated models? — blue, Sep 17 '19 at 22:32
You should try searching for answers before posting. I guarantee you that the issue with `this is undefined` has been answered dozens of times on StackOverflow. This is the first result in a search: https://stackoverflow.com/questions/20279484/how-to-access-the-correct-this-inside-a-callback — M -, Sep 17 '19 at 23:28

score 0 · Answer 1 · answered Sep 17 '19 at 22:14

0

This loader is still available as LegacyJSONLoader. If you include that file in your project, you should be able to create an instance of LegacyJSONLoader and load your JSON model as before.
Here is the Link

answered Sep 17 '19 at 22:14

Muhammad Zia

88
8

I tried that. I then get issues referencing this in my addToScene function (see question update) – blue Sep 17 '19 at 22:31

score 0 · Accepted Answer · answered Sep 17 '19 at 23:38

For the second issue where this is undefined.

this is probably not the object you're looking for. this can mean many different things depending on how you're using it and where you're using it.

However, it looks like scene is passed in to your function so you should be able to do this instead:

var jsonLoader = new THREE.LegacyJSONLoader();
jsonLoader.load( "./src/scripts/elements/android-animations.js", this.addModelJson);

addModelJson( geometry, materials, scene ) // <-- scene is passed in
  {
    // for preparing animation
    for (var i = 0; i < materials.length; i++)
        materials[i].morphTargets = true;

    var material = new THREE.MeshFaceMaterial( materials );
    var android = new THREE.Mesh( geometry, material );
    android.scale.set(10,10,10);

    // this.scene.add( android ); `this` isn't what you are thinking it is
    scene.add(android); // <-- use the passed in `scene` object instead
  }

Sorry, yes I tried just doing scene but it isn't passed to the function. I added that as a parameter trying to fix the 'this' problem. How can I reference this.scene within the function, then, where "this" is the global this? — blue, Sep 18 '19 at 03:09

Three js - JSON loader works in example but not in my code?

2 Answers2