threejs中FBX格式模型的加载与克隆

最近根据项目需求需要加载和克隆带动画的FBX模型，但是发现直接用Object.clone方法无法对fbx模型进行克隆，于是查资料解决克隆问题。

废话不多说，直接正题，所需脚本：

threer97表示R97版本的threejs,这些文件在官方的demo可以找到，此处不介绍。

下边是官网给出加载fbx模型的例子：

var loader = new THREE.FBXLoader();
    //Samba Dancing idle_2
    loader.load( '../model/fbx/Samba Dancing.fbx', function ( object ) {
        mixers=object.mixer = new THREE.AnimationMixer( object );
        var action = object.mixer.clipAction( object.animations[0]);
        action.play();

        object.traverse( function ( child ) {

            if ( child.isMesh ) {

                child.castShadow = true;
                child.receiveShadow = true;

            }

        } );
        object.scale.set(0.5,0.5,0.5);
        object.position.set(0,0,0);
        scene.add( object );

    } );

现在想克隆这个模型，我先把第一次加载的模型及模型的顶点信息和贴图材质保存在全局变量(scope.personpre,scope.referenceModel)中，留着克隆用，代码变化如下：

var loader = new THREE.FBXLoader();
    loader.load( "../model/fbx/greenmushroom_idle.fbx", function ( object ) {
        object.traverse( function ( child ) {
            scope.mixers=object.mixer = new THREE.AnimationMixer( object );
            var action = object.mixer.clipAction( object.animations[0]);
            action.play();
            if ( child.isMesh ) {
                child.castShadow = true;
                child.receiveShadow = true;
            }
        });
        object.scale.set(0.5,0.5,0.5);
        object.position.set(100,120,30);
        scope.scene.add(object);
        scope.personPre=object;
        scope.referenceModel = object.children[1];
    });

scope是我的一个类索引，大家不用理会，看成window即可，注意最后一行，我们加载的fbx模型它会有一个子元素数组，其中有一个元素存储的是mesh信息，我的模型的mesh在第二个，所以我把它取出来保存，如不明白，可以参考下图：

image

其中的红线标出的才是模型显示的关键。

接下来就是克隆,需要用上一步保存的顶点和贴图信息 new一个新的mesh，赋值给用预制体克隆的person，person才会绘制到屏幕上：

var scope=this;
var refObject = this.referenceModel;
var mesh=new THREE.Mesh( refObject.geometry, refObject.material );
mesh.position.set(0,0,10);
mesh.scale.set(0.2,0.2,0.2);
mesh.rotation.x=-0.25*Math.PI;
var person=this.personPre.clone();
person.animations=this.clip;
person.children[1]=mesh;
person.traverse( function ( child ) {
        if ( child.isMesh ) {
            child.castShadow = true;
            child.receiveShadow = true;
        }
});
this.scene.add( person );

20181029150644226.gif

大功告成，此方法的缺点是所有的克隆模型共用一个动画，无法单独控制动画，后续改进正在研究，小弟不才，如有疏漏，多多指导。