Hello, everyone.
I’m currently trying to implement the swapping of items for a character.
Typically, I’ve been loading GLTF using code like below.
import React, { useEffect, useRef } from "react";
import { useGLTF, useAnimations } from "@react-three/drei";
export function Soldier({
animation = "Idle",
...props}) {
const group = useRef();
const { nodes, materials, animations } = useGLTF("/models/Soldier.glb");
const { actions } = useAnimations(animations, group);
console.log(animations);
useEffect( () => {
actions[animation].reset().fadeIn(0.2).play();
return () => actions[animation]?.fadeOut(0.2);
}, [animation]);
return (
<group ref={group} {...props} dispose={null}>
<group name="Scene">
<group name="Character" rotation={[-Math.PI / 2, 0, 0]} scale={0.01}>
<skinnedMesh
name="vanguard_Mesh"
geometry={nodes.vanguard_Mesh.geometry}
material={materials.VanguardBodyMat}
skeleton={nodes.vanguard_Mesh.skeleton}
/>
<skinnedMesh
name="vanguard_visor"
geometry={nodes.vanguard_visor.geometry}
material={materials.Vanguard_VisorMat}
skeleton={nodes.vanguard_visor.skeleton}
/>
<primitive object={nodes.mixamorigHips} />
</group>
</group>
</group>
);
}
useGLTF.preload("/models/Soldier.glb");
In my understanding, I might need to replace the skinnedMesh, but I’m not sure how to go about it. Should I componentize skinnedMesh separately to handle this? If you have any examples or ideas, please let me know!