如何克隆包含加载的.obj模型的组?

时间:2016-07-27 16:44:55

标签: javascript three.js

我创建了一个名为groupChair的空THREE.Object3D()。然后,加载3个obj文件并在回调函数中添加到groupChair中。然后将groupChair添加到场景中。有用。但为什么我不能克隆这个groupChair对象?

下面是代码:

        var groupChair = new THREE.Object3D();
        var cloneChair;
        var cushion;
        var backrest;
        var frame;

        var loader = new THREE.OBJLoader( manager );

        //load the 1st obj file
        loader.load('model-stuff/chair/obj/cushion.obj', function( object ) {
            object.traverse( function ( child ){
                if ( child instanceof THREE.Mesh ) {
                    child.material = new THREE.MeshStandardMaterial({
                        map: textureColorForCushion, 
                        roughness: 3,
                        metalness:0.6,
                        blending: THREE.NormalBlending,
                        shading: THREE.SmoothShading,
                        envMap: textureCube,
                    });
                    child.receiveShadow = true;
                    child.castShadow = true;
                }
            });
            cushion = object;
            groupChair.add( cushion );
        }, onProgress, onError);

        //load the 2nd obj file
        loader.load('model-stuff/chair/obj/backrest.obj', function( object ) {
            object.traverse( function ( child ){
                if ( child instanceof THREE.Mesh ) {
                    child.material = new THREE.MeshStandardMaterial({
                        map: textureColorForCushion, 
                        roughness: 3,
                        metalness:0.6,
                        blending: THREE.NormalBlending,
                        shading: THREE.SmoothShading,
                        envMap: textureCube,
                    });
                    child.receiveShadow = true;
                    child.castShadow = true;
                }
            });
            backrest = object;
            groupChair.add( backrest );
        }, onProgress, onError);

        //load the 3th obj file
        loader.load('model-stuff/chair/obj/frame.obj', function( object ) {
            object.traverse( function ( child ){
                if ( child instanceof THREE.Mesh ) {
                    child.material = new THREE.MeshStandardMaterial({
                        map: textureColorForFrame, 
                        roughness: 0.9,
                        metalness:0.4,
                        blending: THREE.NormalBlending,
                        shading: THREE.SmoothShading,
                        envMap: textureCube,
                    });
                    child.receiveShadow = true;
                    child.castShadow = true;
                }
            });
            frame = object;
            groupChair.add( frame );
        }, onProgress, onError);

        scene.add( groupChair );

        //clone groupChair object, but it doesn't work
        cloneChair = groupChair.clone();
        cloneChair.position.set(30,0,0);
        scene.add( cloneChair );

1 个答案:

答案 0 :(得分:0)

在代码示例中,您将在加载所有对象之前克隆groupChair对象。要等到所有对象都加载完毕,您可以使用THREE.LoadingManager。此外,对于要加载的每个对象,都应添加一个单独的加载器。

    var groupChair = new THREE.Object3D();
    var cloneChair;
    var cushion;
    var backrest;
    var frame;

    var loader1 = new THREE.OBJLoader( manager );

    //load the 1st obj file
    loader1.load('model-stuff/chair/obj/cushion.obj', function( object ) {
        object.traverse( function ( child ){
            if ( child instanceof THREE.Mesh ) {
                child.material = new THREE.MeshStandardMaterial({
                    map: textureColorForCushion, 
                    roughness: 3,
                    metalness:0.6,
                    blending: THREE.NormalBlending,
                    shading: THREE.SmoothShading,
                    envMap: textureCube,
                });
                child.receiveShadow = true;
                child.castShadow = true;
            }
        });
        cushion = object;
        groupChair.add( cushion );
    }, onProgress, onError);

    var loader2 = new THREE.OBJLoader( manager );
    //load the 2nd obj file
    loader2.load('model-stuff/chair/obj/backrest.obj', function( object ) {
        object.traverse( function ( child ){
            if ( child instanceof THREE.Mesh ) {
                child.material = new THREE.MeshStandardMaterial({
                    map: textureColorForCushion, 
                    roughness: 3,
                    metalness:0.6,
                    blending: THREE.NormalBlending,
                    shading: THREE.SmoothShading,
                    envMap: textureCube,
                });
                child.receiveShadow = true;
                child.castShadow = true;
            }
        });
        backrest = object;
        groupChair.add( backrest );
    }, onProgress, onError);

    var loader3 = new THREE.OBJLoader( manager );
    //load the 3th obj file
    loader3.load('model-stuff/chair/obj/frame.obj', function( object ) {
        object.traverse( function ( child ){
            if ( child instanceof THREE.Mesh ) {
                child.material = new THREE.MeshStandardMaterial({
                    map: textureColorForFrame, 
                    roughness: 0.9,
                    metalness:0.4,
                    blending: THREE.NormalBlending,
                    shading: THREE.SmoothShading,
                    envMap: textureCube,
                });
                child.receiveShadow = true;
                child.castShadow = true;
            }
        });
        frame = object;
        groupChair.add( frame );
    }, onProgress, onError);

    scene.add( groupChair );

    manager.onLoad = function(){

        //clone groupChair object, but it doesn't work
        cloneChair = groupChair.clone();
        cloneChair.position.set(30,0,0);
        scene.add( cloneChair );

    }