Creating the Dance Animation
After spending three hours trying to mesh to wave in a believable way I was not about to try and get it bust a move. Adobe Mixamo has free to use models and animations, with the animations usable by uploading your own model. So with little to no effort I had a break dancing model.
Importing the Mixamo File
Mixamo files can be downloaded as .fbx or .dae files, which is not the ideal GLTF format that we want. To convert the file into a GLTF I chose to load the FBX file into Blender and re-download as a GLTF.
Once downloaded I used the helpers provided by react-three-drei to load the model and run the animation.
Dancer Component
All of the code can be found in the DancerFloor.jsx File , but I have also included the Dancer Component below. I have removed some code specific to my implementation to make the below more general for all Mixamo models.
const Dancer = (props) => { const dancer = useRef() const gltf = useGLTF(DancerFile) const {nodes, materials, animations} = gltf const { ref, mixer, names, actions, clips } = useAnimations(animations, dancer) useEffect(() => { actions["Armature|mixamo.com|Layer0"].play() }); return ( <group ref={ref} dispose={null}> <primitive object={nodes?.mixamorigHips} /> <skinnedMesh geometry={nodes?.Man__Cube004.geometry} skeleton={nodes?.Man__Cube004.skeleton} > <meshStandardMaterial attach={"material"} color={"black"} /> </skinnedMesh> </group> ) }
Links
Below is a list of the various docs, and code pens that I looked at well building this. There is a lot of cool things to think about for the future here.
