Load model from variable

Question

All the advices about loading Three.js model into scene involve JSONLoader:

var loader = new THREE.JSONLoader();
var createMesh = function(geometry) { 
   var zmesh = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial() );
   zmesh.position.set( 0, 0, 0 );
   zmesh.scale.set( 3, 3, 3 );
   zmesh.overdraw = true;
   scene.add(zmesh);
};
loader.load("the_model.js", createMesh);

But what if I want to use a JavaScript file already loaded whth a <script> tag?

var the_model = {
   "metadata" : {
      "formatVersion" : 3.1,
      .......................
   },
   "scale" : 1.000000,
   "materials" : [ {
   ........................
}

How can I use this var the_model with Three.js?

Putting it instead of geometry didn't help.

@Alex Wayne: I do not know the format name. I've converted this JSON from OBJ using a Python script included with Three.js — Paul
– Paul, Commented Jun 14, 2013 at 10:54

user142162 · Accepted Answer · 2013-06-11 19:52:36Z

3

You can do this by using THREE.JSONLoader.parse instead of THREE.JSONLoader.load:

var loader = new THREE.JSONLoader();
var geometry = loader.parse(the_model);
createMesh(geometry);

Since an AJAX request doesn't have to be made, the call is synchronous.

answered Jun 11, 2013 at 19:52

user142162

Sign up to request clarification or add additional context in comments.

2 Comments

gaitat Over a year ago

It is not a good idea to use synchronous calls. Imagine loading several models; Your interface will freeze.

Paul Over a year ago

@gaitat: the file with model is already loaded using the script tag. If you are caring about slow model parsing - JavaScript isn't asynchronous in that meaning.

Ry- · Accepted Answer · 2013-09-04 20:23:07Z

2

You need to use a pattern like the following:

var loader = new THREE.JSONLoader();
var model = loader.parse( the_model );

var mesh = new THREE.Mesh( model.geometry, new THREE.MeshBasicMaterial() );
scene.add( mesh );

If your add a material into your model, you would do something like this:

var mesh = new THREE.Mesh( model.geometry, materials[ 0 ] );

three.js r.58

edited Sep 4, 2013 at 20:23

Ry-♦

226k56 gold badges496 silver badges504 bronze badges

answered Jun 15, 2013 at 14:09

WestLangley

105k11 gold badges288 silver badges285 bronze badges

Collectives™ on Stack Overflow

Load model from variable

2 Answers 2

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Related