React-360: Imported animations for rigged models

[Sway71]

Description

Feature Request
The new documentation is very clean, but there doesn't seem to be much information on how to manipulate models. I have several models that are fully rigged and animated (walk cycle, idle animation, etc.) in gltf format and would like to have a way to play those animations in React-360. Is this already a feature? I've been having trouble finding how to access those animations and have no idea how I would go about starting or stopping them. I'm a huge fan of the project though!

Solution

A feature for applying rig animations to components or documentation that explains how to use an already available feature.

Additional Information

• 'react-360' package version: [1.0.0]
• 'react-360-web' package version: [1.0.2]
• Operating System: [MacOS]
• Browser: [Chrome]
• VR Device: [Out of VR]

[russellgoldman]

@Sway71 I'm also having the same issue. If this is not available in React 360, maybe there is a way to tap down into the Three.js core (I was told that React 360 is built on top of Three.js) and use that to animate the rigged models?

Anybody have any ideas?

[amitrajput1992]

The Entity component in r360 supports gltf animations. Entity component is based on the legacy Model component from react-vr. By default, if the gltf definition contains an animations array, your animations should start to play. Sadly I couldn't find a way to manipulate the operations (play/play/stop)
in the source code. You will have to write a custom component to support any additional behaviour.

Following references might help you out:
https://github.com/facebook/react-360/blob/master/Libraries/Mesh/Entity.js (Native component)
https://github.com/facebook/react-360/blob/master/Libraries/Mesh/Model.js (Native component)
https://github.com/facebook/react-360/blob/master/React360/js/Views/Model.js (supporting threejs code)

[Sway71]

@amitrajput1992 Thanks for getting back to me! What you're telling me is a little disconcerting, as I have a character that I modeled, which has multiple animations that I was going to play based on redux state. For now, I can try to create my own version of to accomplish this, but I was wondering if you see that as being a feature to be added in the near future. I know I would greatly appreciate it, and would be happy to share whatever code I come up with during my endeavors (although it may take me some time as I'm using React-360 in a side project of mine). Thanks again!

[amitrajput1992]

@Sway71 I'm working on a prototype component to support animation operations on gltf models. I'll keep you informed once I have that ready.

[Sway71]

@amitrajput1992 Awesome! Thank you! I have to be honest, I have no experience with React-Native, so I was having to do a lot of research to decipher the inner workings of creating native components haha. I look forward to seeing your results! Thanks again!