# How to connect multiple mesh(.fbx) to bone fbx file with Three.js ?

**URL:** <https://discourse.threejs.org/t/how-to-connect-multiple-mesh-fbx-to-bone-fbx-file-with-three-js/53792>\
**Category:** Questions\
**Tags:** animation\
**Created:** [July 12, 2023, 1:51pm UTC](https://discourse.threejs.org/t/how-to-connect-multiple-mesh-fbx-to-bone-fbx-file-with-three-js/53792 "2023-07-12T13:51:40Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![chris2222](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/chris2222/32/38042_2.png) [@chris2222](https://discourse.threejs.org/u/chris2222)\
**Post date:** [July 12, 2023, 1:51pm UTC](https://discourse.threejs.org/t/how-to-connect-multiple-mesh-fbx-to-bone-fbx-file-with-three-js/53792/1 "2023-07-12T13:51:40Z")

</div>

Load one bone fbx file with animation information  
I want to know how to connect multiple mesh files (head, body, tail, etc.) to a bone fbx file.

The problem is that the mesh fbx information is not connected to the bone fbx,  
so the animation does not move.  
I am wondering how to solve it.

fbxLoader.load(  
‘Action\_Angry\_Ani.fbx’,  
(object) =\> {

```
            // Add Skeleton
            let skeleton;
            let bones = [];
            skeleton = new THREE.SkeletonHelper( object );
            skeleton.visible = true;
            scene.add( skeleton );
            // End Skeleton

           
            let texture
            let t = loadTGATexture('custom/tex/character.tga').then(result => {  
                texture = result; 
            });
            Promise.all([t]).then(() => {

                Promise.all([
                    fbxLoader.loadAsync('Body/Custom_Parts_Body_A_001.fbx'),
                    fbxLoader.loadAsync('Ear/Custom_Parts_Ear_A_001.fbx'),
                    fbxLoader.loadAsync('Eye/Custom_Parts_Eye_A_001.fbx'),
                    fbxLoader.loadAsync('Mouth/Custom_Parts_Mouth_A_001.fbx'),
                    fbxLoader.loadAsync('Tail/Custom_Parts_Tail_A_001.fbx'),
                    fbxLoader.loadAsync('Whisker/Custom_Parts_Whister_A_001.fbx'),
                ]).then((results) => {
                    [
                        Custom_Parts_Body001,
                        Custom_Parts_Ear001,
                        Custom_Parts_Eye001,
                        Custom_Parts_Mouth001,
                    
                    const material = new THREE.MeshPhysicalMaterial( { map:texture } );
                    scene.material = texture
                    
                    object.traverse( function ( node ) {
                        console.log("--->",node.name, node.type)

                    });

                    Custom_Parts_Body001.traverse( function ( node ) {
                        if ( node.isMesh ) {
                            node.material = material;
                            node.castShadow = true;
                            node.receiveShadow = false;
                            node.flatshading = true;
                        }
                    });
                    Custom_Parts_Ear001.traverse( function ( node ) {
                        if ( node.isMesh ) {
                            node.material = material;
                            node.castShadow = true;
                            node.receiveShadow = false;
                            node.flatshading = true;
                        }
                    });
                    Custom_Parts_Eye001.traverse( function ( node ) {
                        if ( node.isMesh ) {
                            node.material = material;
                            node.castShadow = true;
                            node.receiveShadow = false;
                            node.flatshading = true;
                        }
                    });
                    Custom_Parts_Mouth001.traverse( function ( node ) {
                        if ( node.isMesh ) {
                            node.material = material;
                            node.castShadow = true;
                            node.receiveShadow = false;
                            node.flatshading = true;
                        }
                    });
                    Custom_Parts_Tail001.traverse( function ( node ) {
                        if ( node.isMesh ) {
                            node.material = material;
                            node.castShadow = true;
                            node.receiveShadow = false;
                            node.flatshading = true;
                        }
                    });
                    Custom_Parts_Whisker001.traverse( function ( node ) {
                        if ( node.isMesh ) {
                            node.material = material;
                            node.castShadow = true;
                            node.receiveShadow = false;
                            node.flatshading = true;
                        }
                    });

                   
                    object.children[0].children[0].children[1].attach(Custom_Parts_Body001)
                    object.children[0].children[0].children[0].attach(Custom_Parts_Ear001)
                    object.children[0].children[0].children[0].attach(Custom_Parts_Eye001)
                    object.children[0].children[0].children[0].attach(Custom_Parts_Mouth001)
                    object.children[0].children[0].children[0].attach(Custom_Parts_Tail001)
                    
                    object.updateMatrix()

                    scene.add(object)

                    let clips = object.animations
                    console.log('clips' , clips)
                        clips.forEach( function ( clip ) {
                            console.log("clip", clip)
                            mixer.clipAction( clip ).play();
                    } );

                 });

            })
                    
        },
        (xhr) => {
            console.log((xhr.loaded / xhr.total) * 100 + '% loaded')
        },
        (error) => {
            console.log(error)
        }
    )

```

---

<div class="post-metadata">

**Author:** ![mjurczyk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mjurczyk/32/10995_2.png) [@mjurczyk](https://discourse.threejs.org/u/mjurczyk)\
**Post date:** [July 13, 2023, 1:13am UTC](https://discourse.threejs.org/t/how-to-connect-multiple-mesh-fbx-to-bone-fbx-file-with-three-js/53792/2 "2023-07-13T01:13:38Z")

</div>

> [@chris2222](#):
>
> `object.children[0].children[0].children[1]`

Cease to do that at once. Do not. Children order is arbitrarily chaotic and random, and that kind of code is simply un-debuggable.

Find bones in the skeleton by using [.getObjectByName](https://threejs.org/docs/index.html?q=object#api/en/core/Object3D.getObjectByName), then `.add` (instead of `.attach`) meshes to the bone.