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.
MIT License
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.
npm install fbx-animation-controls --save
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});
attachedMesh: Mesh | null
isPlaying: boolean
isPaused: boolean
isStopped: boolean
isHTMLControlsAvailable: boolean
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)
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):
So, for now you have two options for styling animation controls:
add to your main html file following (of course with correcting path):
<link rel="stylesheet" href="./node_modules/fbx-animation-controls/src/themes/default.css" />
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