Controlling Multiple Character Animations In React Three Fiber

Опубликовано: 22 Ноябрь 2021
на канале: Code Workshop
10,744
299

In this React Three Fiber tutorial, we add 4 separate animations to a Mixamo character in Blender, export the animation in a format you can use in React, and create a React Three Fiber app with buttons to switch between the animations with a simple fade between the animations.

If you've already seen the previous video on importing rigged characters the beginning may be a bit repetitive but it has been included for new viewers. There have also been some minor updates to library versions and other small enhancements.

We'll use the play, stop, fadeIn, and fadeOut methods included on the AnimationAction class in Three.js to start and stop animations.

The Full Completed Project on Code Sandbox
https://codesandbox.io/s/react-three-...

0:00 Intro
1:22 Finding 3D Assets on Mixamo
2:50 Import Mixamo Models into Blender
6:11 Adding Multiple Animations to Character in Blender
14:32 Exporting to GLTF format from blender
16:01 Using gltfjsx to create a react component wrapper for GLTF file
17:57 Creating a New React App on Code Sandbox
19:04 Importing a 3D Model in React
26:03 Playing an Animation on 3D Model
29:30 Playing Multiple Animations with controls.


Смотрите видео Controlling Multiple Character Animations In React Three Fiber онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Code Workshop 22 Ноябрь 2021, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 10,744 раз и оно понравилось 299 людям.