CODEWITHSUNDEEP
javascriptjsonthree.js
FatUglyProud
FatUglyProud

Reputation: 137

Importing .json model into Three.js

I am new to Three.js and I don't quite understand the model loading.

I have this function which creates a block and another function textures it.

function initThreeAgent()
{
 var shape    = new THREE.BoxGeometry( squaresize, squaresize, squaresize );             
 theagent = new THREE.Mesh( shape );
 theagent.material.color.setHex( BLANKCOLOR );  
 drawAgent();         
}

But let's say I don't want this to be a box, I want it to be a .json model. I know I have to use something like this but I can't quite put it all together.

var loader = new THREE.JSONLoader();
    loader.load( '/uploads/SeanHutchinson/Sporty_Man.json', function ( geometry ) {
    var mesh = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial() );

How can I change the initThreeAgent function to use the above model instead? Thanks!

Upvotes: 1

Views: 60

Answers (1)

TheJim01
TheJim01

Reputation: 8866

If you've come as far as the code above, you've probably tried this already, but there are some small corrections included here:

function initThreeAgent() {
    var loader = new THREE.JSONLoader();

    function loaded(geometry) {
        theagent = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial());
        theagent.material.color.setHex(BLANKCOLOR);
        drawAgent();
    }

    loader.load('/uploads/SeanHutchinson/Sporty_Man.json', loaded);         
}

There are some caveats here, which I'm assuming you're doing elsewhere:

  1. theAgent needs to be added to the scene
  2. The callback you had was malformed, so I broke it out as the loaded function. You can move it back into the load call if you wish.
  3. The call to drawAgent needs to be in the callback, because the load method is asynchronous, and loading a large model may take some time.

Upvotes: 1

Related Questions