https://github.com/patrick-s-young/react-three-drei-gltfjsx
Demo of character animation using react three + drei useGLTF and useAnimations
https://github.com/patrick-s-young/react-three-drei-gltfjsx
Last synced: 3 months ago
JSON representation
Demo of character animation using react three + drei useGLTF and useAnimations
- Host: GitHub
- URL: https://github.com/patrick-s-young/react-three-drei-gltfjsx
- Owner: patrick-s-young
- Created: 2022-08-16T15:28:41.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2022-08-16T16:14:44.000Z (almost 3 years ago)
- Last Synced: 2025-01-16T23:43:14.213Z (5 months ago)
- Language: JavaScript
- Size: 1.18 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Mixamo Character Animation with React Three Fiber and drei's useGLTF and useAnimations
In this [@react-three/fiber](https://www.npmjs.com/package/@react-three/fiber) example, I employeed
[drei](https://github.com/pmndrs/drei)'s useGLTF and useAnimation to create a looping collection of [Mixamo](https://www.mixamo.com)
dance animations (with some state-management help from [zustand](https://github.com/pmndrs/zustand)).
To get the Mixamo assets into react three fiber, check out this excellent tutorial from
[Code Workshop](https://www.youtube.com/watch?v=q7yH_ajINpA).
As demonstrated in the above [YouTube tutorial](https://www.youtube.com/watch?v=q7yH_ajINpA), once your [Mixamo](https://www.mixamo.com)
assets have been prepped and exported to a gltf file, you can use the command-line tool, [gltfjsx](https://github.com/pmndrs/gltfjsx),
to generate a declarative and re-usable [react three fiber](https://www.npmjs.com/package/@react-three/fiber) JSX component.
Animation can then be addeed to the gltfjsx-generated component with useEffect:
```
useEffect(() => {
if (prevActionName !== undefined) {
actions[prevActionName].fadeOut(0.5);
}
actions[actionName]
.reset()
.setEffectiveTimeScale(1)
.setEffectiveWeight(1)
.fadeIn(0.5)
.play();
}, [actions, actionName, prevActionName])
```
## View In Sandbox
[codesandbox.io/s/react-three-drei-gltfjsx](https://codesandbox.io/s/react-three-drei-gltfjsx-323hsv)
## Running Locally
Make sure you have [Node.js](http://nodejs.org/) installed.
```sh
git clone https://github.com/patrick-s-young/react-three-drei-gltfjsx.git # or clone your own fork
cd react-three-drei-gltfjsx
npm install
npm start
```
## Built With
* [@react-three/fiber](https://www.npmjs.com/package/@react-three/fiber) - React renderer for three.js.
* [@react-three/drei](https://www.npmjs.com/package/@react-three/drei) - Helper library for @react-three/fiber.
* [zustand](https://www.npmjs.com/package/zustand) - State-management solution that uses simplified flux principles.
* [Mixamo](https://www.mixamo.com/) - Free animated 3D characters for games, film, and more.
## Author
* **Patrick Young** - [Patrick Young](https://github.com/patrick-s-young)
## License
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.