https://github.com/sawa-zen/utsuroi

The plugin makes it easy to control model animation when use Three.js :)
https://github.com/sawa-zen/utsuroi

animation plugin threejs

Last synced: 18 days ago
JSON representation

The plugin makes it easy to control model animation when use Three.js :)

• Host: GitHub
• URL: https://github.com/sawa-zen/utsuroi
• Owner: sawa-zen
• Created: 2017-03-16T13:39:15.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2019-12-22T14:24:51.000Z (almost 5 years ago)
• Last Synced: 2024-10-21T20:38:29.386Z (29 days ago)
• Topics: animation, plugin, threejs
• Language: TypeScript
• Homepage:
• Size: 1.68 MB
• Stars: 4
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Utsuroi

The plugin makes it easy to control model animation when use Three.js :)

[![MIT License](http://img.shields.io/badge/license-MIT-blue.svg?style=flat)](LICENSE)

![](./readme.gif)

### Setup

#### NPM Install

```bash

$ npm install utsuroi

```

#### Script Install

```html

```

### Basic Usage Example

```javascript

// esm

import { Manipulator } from './manipulator'

let manipulator: Manipulator | undefined;

// Load asset

var loader = new THREE.GLTFLoader();

loader.load('assets/model.gltf', (gltf) {

  // Add scene

  scene.add(gltf.scene)

  // Create Manipulator

  // new Manipulator(THREE.Scene, THREE.AnimationClip[])

  manipulator = new Manipulator(gltf.scene, gltf.animations);

  // start motion

  // manipulator.play(actionName, loop)

  manipulator.play('Rest Pose', true);

});

```

#### How to update animation

Execute the `update` method every frame.

```javascript

function tick() {

  requestAnimationFrame(tick);

  if(manipulator) {

    manipulator.update();

  }

}

tick();

```

#### How to change action

If you want to change the action, simply pass the action name, loop and duration to the `to` method and execute it :)

```javascript

// to(ActionName[, duration, loop])

manipulator.to('Walk', 300, true);

```

#### How to pause animation

```javascript

manipulator.pause();

```