CODEWITHSUNDEEP
reactjsthree.jsreact-three-fiberreact-three-drei
Suisse
Suisse

Reputation: 3613

Clone the nodes from a GLB file loaded with useGLTF in react three fiber?

I am loading my model with useGLTF like this, and access to its nodes, since I need to manipulate them:

  const { nodes, materials } = useGLTF("/model.glb");

    <group>
        <primitive object={nodes.RootNode} />

        <skinnedMesh
            // @ts-ignore
            geometry={nodes.outfit1.geometry}
            // @ts-ignore
            material={nodes.outfit4.material}
            // @ts-ignore
            skeleton={nodes.outfit4.skeleton}
        />
        <skinnedMesh
            // @ts-ignore
            geometry={nodes.haircut.geometry}
            // @ts-ignore
            material={nodes.haircut.material}
            // @ts-ignore
            skeleton={nodes.haircut.skeleton}
        />
    </group>

Now I want to reuse the component but I know you have to clone the model to have it multiple times in your scene in react three fiber; as mentioned here you could use the Clone component from drei, but .clone only works on scene. How can I handle this?

import { Clone, useGLTF } from '@react-three/drei';
export const Model = () => {
  const model = useGLTF('LKGLB.glb');
  return (
    <>
      <Clone object={model.scene} scale={0.35} position-x={-4} />
      <Clone object={model.scene} scale={0.35} position-x={0} />
      <Clone object={model.scene} scale={0.35} position-x={4} />
    </>
  );
}

or use .clone() on the scene:

 const { scene } = useLoader(GLTFLoader, url)
  const copiedScene = useMemo(() => scene.clone(), [scene])

  return (
    <group>
      <primitive object={copiedScene} position={position} />
    </group>
  );

how to do this when I want to use nodes?

Upvotes: 1

Views: 1528

Answers (1)

Camillo
Camillo

Reputation: 96

You can use useGraph from react-three-fiber to get the nodes. For skinned meshes you can use the clone function of Three's SkeletonUtils.

import { SkeletonUtils } from "three-stdlib"
import { useGraph } from '@react-three/fiber'

const scene = useLoader(OBJLoader, url)
const clone = useMemo(() => SkeletonUtils.clone(scene), [scene])
const { nodes } = useGraph(clone)

Here is an example from the react-three-fiber documentation where this is used.

You can also use useGLTF to get the scene:

const { scene } = useGLTF(url)

Upvotes: 1

Related Questions