https://github.com/klich3/theatre-extensions-animations
It is a module for Theatre.js which allows you to import animation into timeline from a GLTF file.
https://github.com/klich3/theatre-extensions-animations
addon animation gltf gltf-animation module plugin theatre theatre-module theatrejs
Last synced: 7 months ago
JSON representation
It is a module for Theatre.js which allows you to import animation into timeline from a GLTF file.
- Host: GitHub
- URL: https://github.com/klich3/theatre-extensions-animations
- Owner: klich3
- Created: 2023-06-16T12:08:49.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2024-07-04T11:22:27.000Z (over 1 year ago)
- Last Synced: 2025-01-13T01:51:17.028Z (9 months ago)
- Topics: addon, animation, gltf, gltf-animation, module, plugin, theatre, theatre-module, theatrejs
- Language: TypeScript
- Homepage:
- Size: 2.39 MB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- Citation: CITATION.cff
Awesome Lists containing this project
README
# Theatre GLTF Animations to Track Sequence importer
Plugin to import GLTF animations.
How it works first we have to declare the SCENE and Animations of the GLTF.
Then select an animated object, in the right menu click on a keyframe and the timeline will open. Click on the button in the toolbar above.
The keyframes of your GLTF will be recreated on the timeline.
It's develop for Theater.js 0.7.2
It is a module for Theatre.js which allows you to import animation into timeline from a GLTF file.
> [!IMPORTANT]
>***Knowledge of Bugs:***
>
> [ ] You need to enable 'Sequence all' so that the script can reassign animation to the selected properties.
>
> [x] When reloading the page, the bind is not saved.
>
> [x] Re-order position axies on import animation
***Theater.js bugs:***
1) Activate secquence for some object: https://github.com/theatre-js/theatre/issues/352
***Videos Samples***
You can see it browsing `_videos` folder.
---
## Instalation and integration
1) run `npm i @theatre/extensions-animations`
***main file***
```javascript
import animationsExtension from "theatre-extensions-animations";
...
studio.extend(animationsExtension);
studio.initialize();
...
```
Example with `useLoader` + `drei`
***project file***
```javascript
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
import { useLoader } from "@react-three/fiber";
import { useAnimations } from "@react-three/drei";
...
import { GLTFAnimEvent } from "theatre-extensions-animations";
...
//function in react
function Scene() {
const gltf = useLoader(GLTFLoader, "/test_animation.glb");
if (gltf) GLTFAnimEvent(gltf);
return ;
}
...
//JSX
{/* ... */}
{/*import model*/}
```
---
### Colaboration
If you want to collaborate, you can create a `pull request` or you can comment it in the `issue` section.
### Docs:
* https://www.theatrejs.com/docs/latest/manual/authoring-extensions