Adding 3d model to already animated model

Questions
, , ,
1

Hie there Devs, I’m currently building an avatar maker using r3f. I need some urgent assistance on how to build some specific functionality.

My current approach thus far has been to import different 3d models i.e multiple .glb models as shown in the image.
image
image

I was configuring them using conditional rendering of the imported models after using useGLTF().

Now i’m trying to build an animation system for these models and it seems there is a bit of an issue. The issue is that only the body has an animation but the clothes and the rest have no animations on it.

image
image713×366 27.2 KB

As shown on this image, rigging has been done for these cloth assets as well. But the issue is they are not connected to the same bone.

How do l ensure that I can connect the clothes to the required bone dynamically as there multiple choices for each piece of clothing. Is this a good way to approach it or not. Let me know if there are any general tips because the animation is not coming out properly. I have tried using createPortal as shown at Attach additional Mesh to a Model with existing Animations? - #7 by CHOIX

using the following code

import React, { useRef } from "react";
import { useGLTF, useAnimations } from "@react-three/drei";
import { useEffect } from "react";
import { createPortal } from "@react-three/fiber";

let animationClips;

function Shirt_Dev(props) {
  const { nodes, materials } = useGLTF("/Animation_Dev/shirt.glb");
  console.log(nodes);
  return (
    <group {...props} dispose={null}>
      <group rotation={[Math.PI / 2, 0, 0]} scale={0.01}>
        <primitive object={nodes.Root_M} />
        <skinnedMesh
          geometry={nodes.upper_cloth_04.geometry}
          material={materials.lambert22}
          skeleton={nodes.upper_cloth_04.skeleton}
        />
      </group>
    </group>
  );
}

useGLTF.preload("/Animation_Dev/shirt.glb");

function Short_Dev(props) {
  const { nodes, materials } = useGLTF("/Animation_Dev/short.glb");
  return (
    <group {...props} dispose={null}>
      <group rotation={[Math.PI / 2, 0, 0]} scale={0.01}>
        <primitive object={nodes.Root_M} />
        <skinnedMesh
          geometry={nodes.lower_cloth_02.geometry}
          material={materials.jean_short}
          skeleton={nodes.lower_cloth_02.skeleton}
        />
      </group>
    </group>
  );
}
// 

useGLTF.preload("/Animation_Dev/short.glb");

export function Body_Dev(props) {
  console.log(props);
  const name = "SceneAnim";
  const group = useRef();
  const { scene, nodes, materials, animations } = useGLTF(
    "/Animation_Dev/body.gltf"
  );
  console.log(scene);
  console.log(nodes);
  console.log(animations);
  animationClips = animations;
  const { actions, names } = useAnimations(animations, group);
  useEffect(() => {
    // Reset and play animations
    actions[names[0]].reset().play();
  }, []);
  return (
    <group
      name={name}
      ref={group}
      {...props}
      dispose={null}
      scale={200}
      position={[0, -2, 0]}
    >
      <group name="Scene">
        <group name="AmbientLight" />
        <group name="scenegltf">
          <group name="charglb">
            <primitive object={nodes.Web_Rig_Grp} />
            {createPortal(<Shirt_Dev />, nodes.Web_Rig_Grp)}
            {createPortal(<Short_Dev />, nodes.Web_Rig_Grp)}
          </group>
        </group>
      </group>
    </group>
  );
}

useGLTF.preload("/Animation_Dev/body.gltf");

and assets:

shirt.glb (56.7 KB)
body.gltf (428.2 KB)
short.glb (40.6 KB)

The output is as follows,

How do l ensure that the animation is also carried to the shirt and short.

Please assist. Anything will be useful really
With kind regards

1 Like
2

I actually couldn’t solve my problem. I am ready to pay someone who knows how to do it. Please (anyone) write me if you want to do this as a job.

4

The problem is the cloth does not have any skeleton or bones or so - you have somehow to copy the right bones (only the torso+arms for shirts) from the avatar and apply it to the cloth and then animate them.

5

How can this be done in code, if you have some implementation code to share, that would be helpful as well