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

最新推荐文章于 2025-07-01 17:41:24 发布

原创

最新推荐文章于 2025-07-01 17:41:24 发布 · 置顶 · 9.4k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#threejs #加载模型 #fbx #animation

本文介绍如何在ThreeJS中加载和克隆带有动画的FBX模型，详细阐述了在直接使用Object.clone无法成功克隆FBX模型的情况下，通过保存模型的顶点信息和贴图材质，然后新建mesh并赋值给克隆对象来实现克隆的方法。这种方法的缺点是所有克隆模型共用同一动画，无法独立控制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

废话不多说，直接正题：

所需脚本：

threer97表示R97版本的threejs。

下边是官网给出加载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 );

    } );