https://github.com/itsdorosh/fbx-animation-controls

The HTML controls for FBX 3D models with animations on three.js scene. Controls are fully customizable with CSS and have plenty of configuring options via JS.
https://github.com/itsdorosh/fbx-animation-controls

animations controls fbx-animations player threejs vanilla-javascript webgl

Last synced: 4 months ago
JSON representation

The HTML controls for FBX 3D models with animations on three.js scene. Controls are fully customizable with CSS and have plenty of configuring options via JS.

• Host: GitHub
• URL: https://github.com/itsdorosh/fbx-animation-controls
• Owner: itsdorosh
• License: mit
• Created: 2018-02-16T22:18:33.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2022-04-08T21:11:40.000Z (almost 3 years ago)
• Last Synced: 2024-09-29T05:22:14.711Z (5 months ago)
• Topics: animations, controls, fbx-animations, player, threejs, vanilla-javascript, webgl
• Language: JavaScript
• Homepage:
• Size: 2.73 MB
• Stars: 12
• Watchers: 3
• Forks: 1
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# fbx-animation-controls

The easiest way to control FBX animations (almost 😇).

Time management, animation control, attaching different meshes, switching to next animation tracks (in development) and so on.

![fbx-animation-controls - how it looks like](./misc/fbx-animation-controls.png)

---

## Installation

`npm install fbx-animation-controls --save`

## Example of usage

```js

import {FBXAnimationControls} from 'fbx-animation-controls';

const controls = new FBXAnimationControls(document.getElementById('viewer'));

// in updateScene hook:

controls.update();

// in application logic:

controls.attach(mesh, {play: true, atTime: 0.123});

``` 

## Properties

- `attachedMesh: Mesh | null`

- `isPlaying: boolean`

- `isPaused: boolean`

- `isStopped: boolean`

- `isHTMLControlsAvailable: boolean`

## Methods

- `attach(mesh: Mesh, attachOptions: IAttachDetachOptions): void`

- `detach(): void`

- `play(): void`

- `pause(): void`

- `stop(): void`

- `setTime(time: string | number): void`

- `setPercentage(percentage: number): void`

- `getCurrentAnimationTimeDisplayString(): string`

- `update(): void`

- `on(eventName)`

## Event System

Plugin may provide some information on deman, by subcsription on available events.

Just call `controls.on(eventName)` and one of the following events (for now there is 7 events):

- PLAY

- PAUSE

- STOP

- MESH_ATTACHED

- MESH_DETACHED

- CHANGE_PERCENTAGE

- CHANGE_TIME

## Styling

So, for now you have two options for styling animation controls:

- add to your main html file following (of course with correcting path):

    ```html

        

    ```

- or add your own styles for the following selectors:

    **general**:

    - `.animationSlider`

    - `.playButton`

    - `.currentAnimationTime`

    **for a track**:

    - `.animationSlider::-webkit-slider-runnable-track`

    - `.animationSlider::-moz-range-track`

    - `.animationSlider::-ms-track`

    **for a thumb**:

    - `.animationSlider::-webkit-slider-thumb`

    - `.animationSlider::-moz-range-thumb`

    - `.animationSlider::-ms-thumb`