ngx-live2d

about

基于 live2d.js 构建的 angular17 版本的 live2d 库

Install

npm install --save ngx-live2d
#or
yarn add ngx-live2d
#or
pnpm add ngx-live2d

Usage

import { Component, signal } from "@angular/core";
import { NgxLive2dComponent, POSITION, ASSETS_TYPE, BUILTIN_MODEL } from "ngx-live2d";
@Component({
  selector: "app-home",
  standalone: true,
  imports: [NgxLive2dComponent],
  templateUrl: "./home.component.html",
  styleUrl: "./home.component.less",
})
export class HomeComponent {
  /**
   * 模型位置 默认POSITION.BOTTOM_RIGTH 右下角
   */
  position = signal(POSITION.BOTTOM_RIGTH);
  /**
   * 配置
   * @assetsType 资源类型，ASSETS_TYPE.INTERIOR内置 ASSETS_TYPE.EXTERNAL 外部资源
   * @assets 资源名称或链接
   */
  configuration = signal({
    assetsType: ASSETS_TYPE.INTERIOR,
    assets: BUILTIN_MODEL.EPSILON2,
  });

  /**
   * 模型单击事件
   */
  modelClickRun() {
    console.log("modelClickRun");
  }
}

<div class="page">
  <ngx-live2d [position]="position()" [configuration]="configuration()" (OnModelClick)="modelClickRun()" />
</div>

API

参数	类型	默认值	说明
POSITION	enum	BOTTOM_RIGTH	模型展示位置。TOP_LEFT 左上角，BOTTOM_LEFT 左下角，TOP_RIGTH 右上角，BOTTOM_RIGTH 右下角
ASSETS_TYPE	enum	INTERIOR	资源类型。INTERIOR 内部资源，EXTERNAL 外部资源
BUILTIN_MODEL	enum	EPSILON2	内置资源名称。有 Z16，EPSILON2，IZUMI，KOHARU，SHIZUKU，MIKU，HIJIKI，TORORO
OnModelClick	Function	-	模型单击事件。

BUILTIN_MODEL

名称	预览
Z16	https://ngx-live2d.async.cn?name=Z16
EPSILON2	https://ngx-live2d.async.cn?name=EPSILON2
IZUMI	https://ngx-live2d.async.cn?name=IZUMI
KOHARU	https://ngx-live2d.async.cn?name=KOHARU
SHIZUKU	https://ngx-live2d.async.cn?name=SHIZUKU
MIKU	https://ngx-live2d.async.cn?name=MIKU
HIJIKI	https://ngx-live2d.async.cn?name=HIJIKI
TORORO	https://ngx-live2d.async.cn?name=TORORO

bugs

https://github.com/stack-stark/ngx-live2d/issues