wxxhrt
wxxhrt

Reputation: 21

Loading models in ThreeJS JSON

I'm seeing different results in Chrome and Safari when loading models using the JSON loader. In Safari the following code loads 1000 models all at once, whereas in Chrome they appear one by one over about 20 seconds. I'd like them to appear all at once in Chrome too, any ideas?

 // Add Models
            for( var i = 0; i < noOfMeshesToBuild;i++){ 

                var object;
                var loaderJ = new THREE.JSONLoader();
                loaderJ.load( meshNames[Math.floor(Math.random() * meshNames.length)], function ( geometry, materials ) {
                    // Workaround to make faces flat shaded with lambert material
                    geometry.computeFaceNormals(); 
                    for ( var i = 0; i < geometry.faces.length; i ++ ) {
                        geometry.faces[ i ].vertexNormals = []; 
                    }
                    geometry = new THREE.BufferGeometry().fromGeometry( geometry );

                    // Add objects to scene, array
                    object = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial()); // this makes a new material for each object
                    theLoadedMeshes.push(object);
                    scene.add( object );

                    // Randomise stuff
                    RandomisePosition(object);
                    RandomiseRotation(object);
                    RandomiseScale(object);
                    RandomiseColors(object);

                    // Add edges
                    edge = new THREE.EdgesHelper( object, edgeColor, 5.0 );
                    edge.material.linewidth = 1;
                    scene.add( edge); 

                    //Add direction, distance to translate the objects
                    var transAmount = 1.0 / (object.scale.x + Math.random()) * masterSpeed;
                    var posMin = [-1,1];
                    var direction = Math.floor(Math.random()+ 0.5);
                    var posMinChoice = posMin[Math.floor(Math.random() * posMin.length)];
                    transArray.push(transAmount);
                    directionArray.push(direction);
                    posMinArray.push(posMinChoice);

                });
            }

Upvotes: 0

Views: 108

Answers (1)

wxxhrt
wxxhrt

Reputation: 21

I only have 3 models so just loading the 3 of them then cloning worked a treat, thanks for pointing me in the right direction Kenney

// Load up Models
            for( var n = 0; n < meshNames.length; n++){
                var loaderJ = new THREE.JSONLoader();
                loaderJ.load( meshNames[n], function ( geometry, materials ) {
                    // Workaround to make faces flat shaded with lambert material
                    geometry.computeFaceNormals(); 
                    for ( var i = 0; i < geometry.faces.length; i ++ ) {
                        geometry.faces[ i ].vertexNormals = []; 
                    }
                    geometry = new THREE.BufferGeometry().fromGeometry( geometry );

                    // Add objects to jsonObject array
                    var object = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial()); // this makes a new material for each object
                    jsonObjects.push(object);

                    // Once all objects have been added
                    if (jsonObjects.length == meshNames.length){
                        Clone();
                    }
                });
            }

            // Clone Models
            function Clone(){
                for( var i = 0; i < noOfMeshesToBuild;i++){ 

                    var randomObject = jsonObjects[Math.floor(Math.random() * jsonObjects.length)];
                    object = randomObject.clone();
                    // this makes each object have its own material
                    object.material = new THREE.MeshLambertMaterial();
                    scene.add(object);
                    theLoadedMeshes.push(object);

                    RandomisePosition(object);
                    RandomiseRotation(object);
                    RandomiseScale(object);
                    RandomiseColors(object);

                    // Add edges
                    edge = new THREE.EdgesHelper( object, edgeColor, 5.0 );
                    edge.material.linewidth = 1;
                    scene.add( edge); 

                    //Add direction, distance to translate the objects
                    var transAmount = 1.0 / (object.scale.x + Math.random()) * masterSpeed;
                    var posMin = [-1,1];
                    var direction = Math.floor(Math.random()+ 0.5);
                    var posMinChoice = posMin[Math.floor(Math.random() * posMin.length)];
                    transArray.push(transAmount);
                    directionArray.push(direction);
                    posMinArray.push(posMinChoice);

                }
            }
        }

Upvotes: 1

Related Questions