npm

Join us for the upcoming webinar, "Enterprise JavaScript done right: the tools you love, the security you need."Sign up here »

manny

2.3.3 • Public • Published

Manny

npm package for importing @mannynotfound into your website. manny will be represented as a 3D model loaded with three.js and appended to an element in the DOM.

Live Demo

https://mannynotfound.github.io/

Usage

As a module

npm install manny
import Manny from 'manny';
 
// render to the DOM
const manny = new Manny({
    container: '#container',
    useBackground: true,
});
 
// do specific action once
manny.do('bellydance');
 
// do specific action on loop
manny.do('agony', { loop: true });
 
// do all actions on loop
manny.doTheMost();

As a library

<html>
    <head></head>
    <body>
        <div id="container"></div>
        <script src="https://cdn.jsdelivr.net/npm/manny/lib/manny.js" type="text/javascript"></script> 
        <script>
            var manny = new Manny({ container: '#container' });
            manny.doTheMost();
        </script> 
    </body>
</html>

Module options

Prop Type Default Description
container string 'body' dom query selector for element to append manny
useBackground boolean false if true, renders a white room and grid floor around manny

Actions

manny is using the mixamo rig and a curated portion of their animation library with convenient aliases. By default, manny comes with wave and idle. Any other actions will be fetched from the action library cdn, added to the manny instance and start playing.

Actions are called with the do function:

manny.do('wave'); // loaded by default
manny.do('fly'); // fetched from cdn library + applied to manny instance

do options

Prop Type Default Description
loop boolean false if true, will loop action until new action is chosen
manny.do('bellydance', { loop: true });

For a full list of available animations, check the library fixture.

Events

manny's do function returns a promise that can be used to listen to the completion of an action. The promise will resolve with an "event" containing the type, action, target and direction. For example:

manny.do('victory').then(event => {
  console.log(event.type); // "finished"
  console.log(event.action); // three.js AnimationAction instance
  console.log(event.target); // three.js AnimationMixer instance
  console.log(event.direction); // 1
 
  showVictoryText('Good job!');
});

note: this can be used with { loop: true } but will only fire the first time the action is completed

Running Locally

npm run dev

Go to localhost:8080 to see the local test application.

install

npm i manny

Downloadsweekly downloads

85

version

2.3.3

license

WTFPL

homepage

art404.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability