I want to load quite a lot of JSON models and put them in global variables so I can use them to copy, translate, etc. That way I won't have to load a model every time i need one.
I tried some methods but it seems loading the models happens asynchronously.
The models seem to be loaded after everything else is already done. So I will already have declared my variables but they stay empty or don’t work. How do I load the models first, wait until that is done and then start the init() and the rest of my code?
example:
var loader = new THREE.JSONLoader();
var test1 = new THREE.Object3D();
var test2 = new THREE.Object3D();
var test3 = new THREE.Object3D();
var test4 = new THREE.Object3D();
var test5 = new THREE.Object3D();
var test6 = new THREE.Object3D();
var test7 = new THREE.Object3D();
loadparts();
init();
animate();
function init() {
var newpart = test1.clone();
console.log("newpart.id:" + newpart.id);
newpart.position.set(0,0,0);
scene.add(newpart);
console.log("test1.children.length:" + test1.children.length);
placePart(test1,0,100,0);
placePart(test2,0,200,0);
placePart(test3,0,300,0);
placePart(test4,0,400,0);
placePart(test5,0,500,0);
placePart(test6,0,600,0);
placePart(test7,0,700,0);
}
function loadparts( ) {
loader.load( "Models/test1.js", function ( geometry, materials ) { createPart( geometry, materials, test1 ) } );
loader.load( "Models/test2.js", function ( geometry, materials ) { createPart( geometry, materials, test2 ) } );
loader.load( "Models/test3.js", function ( geometry, materials ) { createPart( geometry, materials, test3 ) } );
loader.load( "Models/test4.js", function ( geometry, materials ) { createPart( geometry, materials, test4 ) } );
loader.load( "Models/test5.js", function ( geometry, materials ) { createPart( geometry, materials, test5 ) } );
loader.load( "Models/test6.js", function ( geometry, materials ) { createPart( geometry, materials, test6 ) } );
loader.load( "Models/test7.js", function ( geometry, materials ) { createPart( geometry, materials, test7 ) } );
}
function createPart( geometry, materials, object3Dtemp) {
Part = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial( materials ) );
Part.scale.set( 1000, 1000, 1000 );
console.log("ModelPart created:" + Part.id);
object3Dtemp.add( Part );
}
function placePart( object3Dtemp, x, y, z) {
Part = object3Dtemp.clone();
Part.position.set( x, y, z );
console.log("Part.id:" + Part.id);
scene.add( Part );
}
in console:
newpart.id:12
test1.children.length:0
Part placed: 0 100 0 13
Part placed: 0 200 0 14
Part placed: 0 300 0 15
Part placed: 0 400 0 16
Part placed: 0 500 0 17
Part placed: 0 600 0 18
Part placed: 0 700 0 19
THREE.WebGLRenderer 63
ModelPart created:21
ModelPart created:22
ModelPart created:23
ModelPart created:24
ModelPart created:25
ModelPart created:26
ModelPart created:27