easy-cl2d

A simplified wrapper around Live2D Cubism Web Framework for easy model loading.

Getting Started

Download Cubism SDK and connect live2dcubismcore.js or live2dcubismcore.min.js in the script tag.

Usage

import { startup, createModelView, Ticker } from 'easy-live2d';

// Run the startup function once
startup({ log: () => {}, logLevel: 'off' })

// Get canvas ready
const canvas = document.createElement('canvas');
canvas.style.cssText += `width: 100vw; height: 100vh`;
document.body.appendChild(canvas);

const ticker = new Ticker();
ticker.start();

const model = createModelView({
  model: {
    directory: 'Mao', // path to model directory
    model3: 'Mao.model3.json' // name of model3.json file inside of model directory
  },
  ticker,
  canvas,
  onTap: ({ hit, model, pos }) => {
    console.log(pos); // { x: number, y: number }

    if (hit('Head')) {
      model.setRandomExpression()
    } else if (hit('Body')) {
      model.startRandomMotion('TapBody', 2)
    }
  },
  onIdle: ({ model }) => {
    model.startRandomMotion('Idle', 1)
  }
})

// Dispose the model
setTimeout(() => {
  ticker.stop();
  model[Symbol.dispose]();
}, 10_000);

License

This project contains modified code from:

Cubism Web Framework Cubism Web Samples

Original code © Live2D Inc., licensed under the Live2D Open Software License Agreement. See LICENSE.live2d.md for details.

Modifications licensed under MIT. See NOTICE for more information.