# three-plain-animator

> package for threejs to support plain animations generated from sprite textures

Latest version **1.1.2** (published 2022-04-09) · MIT license · 0 weekly downloads

## Install

```sh
npm install three-plain-animator
pnpm add three-plain-animator
yarn add three-plain-animator
bun add three-plain-animator
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.2 |
| Published | 2022-04-09 |
| First published | 2019-04-19 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 17.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 84 |
| Author | Maciej Wójcik |
| Maintainers | maciejwojcik |
| Keywords | three, threejs, animation, sprite, animations |

## Links

- npm: https://www.npmjs.com/package/three-plain-animator
- Repository: https://github.com/MaciejWWojcik/three-plain-animator
- Homepage: https://github.com/MaciejWWojcik/three-plain-animator#readme
- Issues: https://github.com/MaciejWWojcik/three-plain-animator/issues
- npm.io page: https://npm.io/package/three-plain-animator

## Alternatives

- [@luma.gl/experimental](https://npm.io/package/@luma.gl/experimental.md) — 77.1K weekly downloads
- [persona-harness](https://npm.io/package/persona-harness.md) — 4.7K weekly downloads
- [@tsparticles/effect-bubble](https://npm.io/package/@tsparticles/effect-bubble.md) — 4.6K weekly downloads
- [f3d](https://npm.io/package/f3d.md) — 730 weekly downloads
- [spark-html-motion](https://npm.io/package/spark-html-motion.md) — 298 weekly downloads

## Recent versions

- 1.1.2 (latest) — 2022-04-09
- 1.1.1 — 2022-04-09
- 1.0.11 — 2022-04-09
- 1.0.10 — 2022-04-09
- 1.0.9 — 2022-03-27
- 1.0.8 — 2022-03-27
- 1.0.6 — 2020-08-28
- 1.0.2 — 2019-04-19
- 1.0.1 — 2019-04-19
- 1.0.0 — 2019-04-19

## README

# Welcome to three-plain-animator

Three-Plain-Animator is a package for [threejs](https://github.com/mrdoob/three.js/) developers to support 2D
animations.

[![npm version](https://badge.fury.io/js/three-plain-animator.svg)](https://badge.fury.io/js/three-plain-animator)
[![TypeScript](https://badges.frapsoft.com/typescript/code/typescript.svg?v=101)](https://github.com/ellerbrock/typescript-badges/)

![Example](https://media.giphy.com/media/cL5HGzoR4TAXvPrTX6/giphy.gif)

## Installation

The package is available via npm: [three-plain-animator](https://www.npmjs.com/package/three-plain-animator)

    npm i three-plain-animator

## Usage

There are two main classes to work with:

- PlainAnimator
- PlainSingularAnimator

The first one is for continuous animations like walking. The second one is for animation that should run only once and
then stop on the last frame of the animation.

## Example

This is a simple example with Homer Simpson
animation [gif for reference](https://ui-ex.com/images/transparent-gifs-simpson-2.gif). I assume that creating a basic
scene using threejs is not a part of this example. So I will show only unnecessary code just to not mess around.

I converted gif to sprite and uploaded this on imgur.

The first step is to create texture just like every texture using threejs.

    const texturePath =  'https://i.imgur.com/Oj6RJV9.png';
    const spriteTexture = new  THREE.TextureLoader().load(texturePath)

Next step is about creating the animator object:

     const animator =  new  PlainAnimator(spriteTexture, 4, 4, 10, 15);

These magic numbers are the follows:
|value| description | |--|--| | 4 | number of frames horizontally | | 4 | number of frames vertically | | 10 | total
number of frames | | 15 | frames per second (fps) |

Then the final texture could be get using init() method:

    const texture = animator.init();

To animate texture it's required to animate texture in the **main loop of rendering**

    animator.animate();

So for instance, you can use it as follows:

```tsx

function animate() {
  renderer.render(scene, camera);
  animator.animate(); // update the animation
  requestAnimationFrame(animate);
}

animate();

```

Full code:

    const texturePath =  'https://i.imgur.com/Oj6RJV9.png';
    const spriteTexture = new  THREE.TextureLoader().load(texturePath)
    const animator =  new  PlainAnimator(spriteTexture, 4, 4, 10, 15);

	const texture = animator.init();    

    const geometry =  new  THREE.PlaneGeometry(512,  512);
    const material =  new  THREE.MeshBasicMaterial({ map: texture, transparent:  true  });
    
    let mesh =  new  THREE.Mesh(geometry, material)

There is working code on  [stackblitz](https://stackblitz.com/edit/plain-animations) with this example:

## Docs

Read docs [here](https://maciejwwojcik.github.io/three-plain-animator).

## Requierments

The package requires threejs library

## Support

The package supports TypeScript and contains typescript definitions.

## Future work & TODO

1. GIF files support
2. Tests

##    

Feel free to ask any questions. Post on GitHub or write to me: maciejwwojcik@gmail.com

---
_Source: https://npm.io/package/three-plain-animator · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._