Tengo un modelo 3D de Mixamo y usé npx gltfjsx para convertirlo en un componente. Ahora me gustaría renderizar este modelo varias veces, pero cuando intento hacerlo, solo obtengo un modelo en Canvas.
¿Hay alguna forma de hacer esto? Aquí está mi archivo:
const { actions } = useAnimations(animations, heroRef); return ( <> <group ref={heroRef} dispose={null}> <group rotation={[Math.PI / 2, 0, 0]} scale={0.01}> <primitive object={nodes.mixamorig1Hips} /> <skinnedMesh geometry={nodes.Ch36.geometry} material={materials.Ch36_Body} skeleton={nodes.Ch36.skeleton} /> </group> {/* <gridHelper args={[25, 25]}/> */} </group> </> ); } useGLTF.preload("/Mannequin.glb"); ``` Any help/advice is appreciated.El modelo necesita ser clonado, así:
const scene = React.useMemo(() => { return model.scene.clone(); }, [model]); Lo anterior clona la scene , pero puede hacer lo mismo con los nodes , materials , etc. dentro del objeto devuelto por useGLTF
Aquí hay un ejemplo:
https://codesandbox.io/s/heuristic-clarke-g58yp?file=/src/App.js