How to replace a part of skinnedMesh in R3F

Questions
,
1

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!

2

You could conditionally render via state. Set a string to the default visor and then each visor gets its own name to plug into the state, and render based off which name is the present state.