在ThreeJS JSON中加载模型

时间:2016-02-19 19:18:28

标签: json three.js

在使用JSON加载程序加载模型时,我在Chrome和Safari中看到了不同的结果。在Safari中,以下代码一次加载1000个模型,而在Chrome中,它们在大约20秒内逐个加载。我希望他们能够同时出现在Chrome中的任何想法吗?

 // 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);

                });
            }

1 个答案:

答案 0 :(得分:1)

我只有3个模型,所以只加载其中的3个,然后克隆工作了一个款待,谢谢你指出我正确的方向肯尼

// 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);

                }
            }
        }