threepipe
Version:
A modern 3D viewer framework built on top of three.js, written in TypeScript, designed to make creating high-quality, modular, and extensible 3D experiences on the web simple and enjoyable.
205 lines • 8.5 kB
TypeScript
import { AViewerPluginEventMap, AViewerPluginSync, ThreeViewer } from '../../viewer';
import { UiObjectConfig } from 'uiconfig.js';
import { AnimationAction, AnimationClip, AnimationMixer, EventListener2, Object3D, Scene } from 'three';
import { ISceneEventMap } from '../../core';
import { Object3DManager, Object3DManagerEventMap } from '../../assetmanager';
export interface GLTFAnimationPluginEventMap extends AViewerPluginEventMap {
checkpointBegin: object;
checkpointEnd: object;
animationStep: {
delta: number;
time: number;
};
addAnimation: {
animation: IObjectAnimation;
};
removeAnimation: {
animation: IObjectAnimation;
};
}
export interface IObjectAnimation {
object: Object3D;
mixer: AnimationMixer;
clips: AnimationClip[];
actions: AnimationAction[];
duration: number;
}
/**
* Manages playback of GLTF animations.
*
* The GLTF animations can be created in any 3d software that supports GLTF export like Blender.
* If animations from multiple files are loaded, they will be merged in a single root object and played together.
*
* The time playback is managed automatically, but can be controlled manually by setting {@link autoIncrementTime} to false and using {@link setTime} to set the time.
*
* This plugin is made for playing, pausing, stopping, all the animations at once, while it is possible to play individual animations, it is not recommended.
*
* To play individual animations, with custom choreography, use the {@link GLTFAnimationPlugin.animations} property to get reference to the animation clips and actions. Create your own mixers and control the animation playback like in three.js
*
* @category Plugins
*/
export declare class GLTFAnimationPlugin extends AViewerPluginSync<GLTFAnimationPluginEventMap> {
enabled: boolean;
uiConfig: UiObjectConfig;
static readonly PluginType = "GLTFAnimation";
protected readonly _animations: IObjectAnimation[];
/**
* List of GLTF animations loaded with the models.
* The animations are standard threejs AnimationClip and their AnimationAction. Each set of actions also has a mixer.
*/
get animations(): IObjectAnimation[];
/**
* If true, the animation time will be automatically incremented by the time delta, otherwise it has to be set manually between 0 and the animationDuration using `setTime`. (default: true)
* Set it to false when controlling the time manually like when using the timeline or other custom controls.
*
* Note that this is not serialized, so it will not be saved in the scene file and must be set manually in the code.
*/
autoIncrementTime: boolean;
/**
* Loop the complete animation. (not individual actions)
* This happens {@link loopRepetitions} times.
*/
loopAnimations: boolean;
/**
* Number of times to loop the animation. (not individual actions)
* Only applicable when {@link loopAnimations} is true.
*/
loopRepetitions: number;
/**
* Timescale for the animation. (not individual actions)
* If set to 0, it will be ignored.
*/
timeScale: number;
/**
* Speed of the animation. (not individual actions)
* This can be set to 0.
*/
animationSpeed: number;
/**
* Automatically track mouse wheel events to seek animations
* Control damping/smoothness with {@link scrollAnimationDamping}
* See also {@link animateOnPageScroll}. {@link animateOnDrag}
*/
animateOnScroll: boolean;
/**
* Damping for the scroll animation, when {@link animateOnScroll} is true.
*/
scrollAnimationDamping: number;
/**
* Automatically track scroll event in window and use `window.scrollY` along with {@link pageScrollHeight} to seek animations
* Control damping/smoothness with {@link pageScrollAnimationDamping}
* See also {@link animateOnDrag}, {@link animateOnScroll}
*/
animateOnPageScroll: boolean;
/**
* Damping for the scroll animation, when {@link animateOnPageScroll} is true.
*/
pageScrollAnimationDamping: number;
/**
* Automatically track drag events in either x or y axes to seek animations
* Control axis with {@link dragAxis} and damping/smoothness with {@link dragAnimationDamping}
*/
animateOnDrag: boolean;
/**
* Axis to track for drag events, when {@link animateOnDrag} is true.
* `x` will track horizontal drag, `y` will track vertical drag.
*/
dragAxis: 'x' | 'y';
/**
* Damping for the drag animation, when {@link animateOnDrag} is true.
*/
dragAnimationDamping: number;
/**
* If true, the animation will be played automatically when the model(any model with animations) is loaded.
*/
autoplayOnLoad: boolean;
/**
* Force (not serialized) version of {@link autoplayOnLoad}, this will play the animation even if it {@link autoplayOnLoad} is disabled inside the saved file.
*/
autoplayOnLoadForce: boolean;
/**
* Sync the duration of all clips based on the max duration, helpful for things like timeline markers
*/
syncMaxDuration: boolean;
/**
* Get the current state of the animation. (read only)
* use {@link playAnimation}, {@link pauseAnimation}, {@link stopAnimation} to change the state.
*/
get animationState(): 'none' | 'playing' | 'paused' | 'stopped';
/**
* Get the current animation time. (read only)
* The time is managed automatically.
* To manage the time manually set {@link autoIncrementTime} to false and use {@link setTime} to change the time.
*/
get animationTime(): number;
/**
* Get the current animation duration (max of all animations). (read only)
*/
get animationDuration(): number;
playPauseAnimation(): void;
protected _animationState: 'none' | 'playing' | 'paused' | 'stopped';
private _lastAnimationTime;
private _animationTime;
private _animationDuration;
private _scrollAnimationState;
private _pageScrollAnimationState;
private _dragAnimationState;
private _pointerDragHelper;
private _lastFrameTime;
private _fadeDisabled;
constructor();
setTime(time: number): void;
onAdded(viewer: ThreeViewer): void;
onRemove(viewer: ThreeViewer): void;
onStateChange(): void;
/**
* This will play a single clip by name
* It might reset all other animations, this is a bug; https://codepen.io/repalash/pen/mdjgpvx
* @param name
* @param resetOnEnd
*/
playClip(name: string, resetOnEnd?: boolean): Promise<void>;
playClips(names: string[], resetOnEnd?: boolean): Promise<void>;
private _lastAnimId;
/**
* If true, will stop the animation when the animation ends. (when not looping)
*/
stopOnCheckpointEnd: boolean;
autoUnpauseActions: boolean;
autoEnableActions: boolean;
activeActionWeight: number | null;
inactiveActionWeight: number | null;
/**
* Starts all the animations and returns a promise that resolves when all animations are done.
* @param resetOnEnd - if true, will reset the animation to the start position when it ends.
* @param animations - play specific animations, otherwise play all animations. Note: the promise returned (if this is set) from this will resolve before time if the animations was ever paused, or converged mode is on in recorder.
*/
playAnimation(resetOnEnd?: boolean, animations?: AnimationAction[]): Promise<void>;
pauseAnimation(): void;
resumeAnimation(): void;
stopAnimation(reset?: boolean): void;
resetAnimation(): void;
protected _postFrame(): void;
protected _objectAdded: EventListener2<'objectAdd', Object3DManagerEventMap, Object3DManager>;
protected _objectRemoved: EventListener2<'objectRemove', Object3DManagerEventMap, Object3DManager>;
private _refreshAnimations;
protected _sceneUpdate: EventListener2<'sceneUpdate', ISceneEventMap, Scene>;
private _onPropertyChange;
get pageScrollTime(): number;
private _scroll;
private _wheel;
private _drag;
pageScrollHeight: () => number;
}
declare module 'three' {
interface AnimationAction {
_startTime: number | null;
clipData?: {
uid: string;
name: string;
startTime: number;
timeScale: number;
};
}
}
//# sourceMappingURL=GLTFAnimationPlugin.d.ts.map