threejs中FBX格式的模型加载和克隆
最近根据项⽬需求需要加载和克隆带动画的FBX模型,但是发现直接⽤Object.clone⽅法⽆法对fbx模型进⾏克隆,于是查资料解决克隆问题。hottopic
废话不多说,直接正题:
所需脚本:
threer97表⽰R97版本的threejs。
下边是官⽹给出加载fbx模型的例⼦:
var loader = new THREE.FBXLoader();
//Samba Dancing idle_2
loader.load( '../model/fbx/Samba Dancing.fbx', function ( object ) {
spdif
mixers=object.mixer = new THREE.AnimationMixer( object );
var action = object.mixer.clipAction( object.animations[0]);
action.play();blew
if ( child.isMesh ) {
child.castShadow = true;
breakfast
}
} );
object.scale.t(0.5,0.5,0.5);
object.position.t(0,0,0);
scene.add( object );
} );
现在想克隆这个模型,我先把第⼀次加载的模型及模型的顶点信息和贴图材质保存在全局变量(scope.ferenceModel)中,留着克隆⽤,代码变化如下:
var loader = new THREE.FBXLoader();
loader.load( "../model/fbx/greenmushroom_idle.fbx", function ( object ) {
scope.mixers=object.mixer = new THREE.AnimationMixer( object );
var action = object.mixer.clipAction( object.animations[0]);
action.play();
if ( child.isMesh ) {
child.castShadow = true;
}
});
object.scale.t(0.5,0.5,0.5);
hottest girlsobject.position.t(100,120,30);
scope.scene.add(object);
scope.personPre=object;
});
scope是我的⼀个类索引,⼤家不⽤理会,看成window即可,注意最后⼀⾏,我们加载的fbx模型它会有⼀个⼦元素数组,其中有⼀个元素存储的是mesh信息,我的模型的mesh在第⼆个,所以我把它取出来保存,如不明⽩,可以参考下图:
汤唯英语
其中的红线标出的才是模型显⽰的关键。
接下来就是克隆,需要⽤上⼀步保存的顶点和贴图信息 new⼀个新的mesh,赋值给⽤预制体克隆的p
erson,person才会绘制到屏幕上:
var scope=this;
puton
var refObject = ferenceModel;
var mesh=new THREE.Mesh( ry, refObject.material );
mesh.position.t(0,0,10);
mesh.scale.t(0.2,0.2,0.2);
var person=this.personPre.clone();
person.animations=this.clip;
person.children[1]=mesh;jessica sanchez
if ( child.isMesh ) {
child.castShadow = true;
}
});
tententhis.scene.add( person );
⼤功告成,此⽅法的缺点是所有的克隆模型共⽤⼀个动画,⽆法单独控制动画,后续改进正在研究,⼩弟不才,如有疏漏,多多指导。
>opportunity