npm - @seayoo-web/pixi-live2d - Versions diffs - 0.1.1 → 1.0.0 - Mend

@seayoo-web/pixi-live2d 0.1.1 → 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/README.md +75 -61
package/dist/{core-DiacFOEI.js → core-DBA9LYvt.js} +2 -2
package/dist/{cubism4.es-B18JJVJM.js → cubism4.es-DbGCrqOi.js} +1 -1
package/dist/index.js +58 -53
package/package.json +7 -5
package/types/index.d.ts +10 -12

package/README.md CHANGED Viewed

@@ -4,10 +4,10 @@
 ## 特性
-- **零 Vue 依赖**：纯 TypeScript 实现，可用于任何框架（React, Vue, Vanilla JS）。
-- **自动缩放**：内置适配 1920x1080 设计稿的响应式缩放逻辑。
-- **简单易用**：只需传入 Canvas 元素和模型路径即可。
-- **交互支持**：内置点击交互与动作播放方法。
+- **零框架依赖**：纯 TypeScript 实现，可用于任何框架（React、Vue、Vanilla JS）。
+- **多实例**：每个 `Live2DViewer` 持有独立的 PIXI 应用与 WebGL context，可在页面多处同时渲染、互不干扰。
+- **响应式缩放**：按 canvas 容器尺寸适配设计稿（默认 1920×1080），并可选监听窗口 resize 自动调整。
+- **交互支持**：内置点击播放动作、指针跟随等交互。
 ## 安装
@@ -15,92 +15,106 @@
 pnpm add @seayoo-web/pixi-live2d
 ```
-## 在你的项目中使用：
+## 使用
 ### 基础用法
 ```typescript
 import { Live2DViewer } from "@seayoo-web/pixi-live2d";
-// 方式 1: 传入 Canvas ID
-const viewer1 = new Live2DViewer("live2d-canvas", {
+// 方式 1：传入 canvas 元素的 id
+const viewer = new Live2DViewer("live2d-canvas", {
   modelPath: "https://cdn.example.com/live2d/model.json",
 });
-// 方式 2: 传入 HTMLCanvasElement 并配置初始参数
-const canvasElement = document.getElementById("my-canvas") as HTMLCanvasElement;
-const viewer2 = new Live2DViewer(canvasElement, {
+// 方式 2：传入 HTMLCanvasElement 并配置初始参数
+const canvas = document.getElementById("my-canvas") as HTMLCanvasElement;
+const viewer2 = new Live2DViewer(canvas, {
   modelPath: "https://cdn.example.com/live2d/model.json",
-  // 初始位置和缩放
   x: 0,
   y: 0,
   scale: 0.2, // 模型缩放比例
-  // 设计稿尺寸 (用于自动计算适配比例)
-  designWidth: 1920,
+  designWidth: 1920, // 设计稿尺寸（用于自动计算适配比例）
   designHeight: 1080,
   autoResize: true,
-  onModelLoaded: (model) => {
-    console.log("模型加载成功:", model);
-  },
-  onModelError: (error) => {
-    console.error("模型加载失败:", error);
-  },
+  onModelLoaded: (model) => console.log("模型加载成功:", model),
+  onModelError: (error) => console.error("模型加载失败:", error),
 });
 ```
-### API 说明
+### 多实例
-#### `new Live2DViewer(canvas, options)`
+每个实例使用各自的 canvas，可同时存在于页面不同位置、互不干扰：
-- `canvas`: `HTMLCanvasElement | string` - 用于渲染的 Canvas 元素或其 ID
-- `options`: `Live2DViewerOptions` - 配置项
+```typescript
+const left = new Live2DViewer("canvas-left", { modelPath: "/a/model.json", scale: 0.2 });
+const right = new Live2DViewer("canvas-right", { modelPath: "/b/model.json", scale: 0.2 });
-| 属性 | 类型 | 默认值 | 说明 |
-|Data Type|Type|Default|Description|
-|---|---|---|---|
-| `modelPath` | `string` | (必填) | Live2D 模型配置文件 (.json) 的路径 |
-| `scale` | `number` | - | 初始缩放比例 |
-| `x` | `number` | 0 | 初始 X 轴偏移 |
-| `y` | `number` | 0 | 初始 Y 轴偏移 |
-| `designWidth` | `number` | 1920 | 设计稿宽度（用于适配计算） |
-| `designHeight` | `number` | 1080 | 设计稿高度（用于适配计算） |
-| `autoResize` | `boolean` | `true` | 是否监听窗口 resize 事件并自动调整模型大小 |
-| `onModelLoaded` | `(model) => void` | - | 模型加载完成后的回调函数 |
-| `onModelError` | `(error) => void` | - | 模型加载失败的回调函数 |
-#### 实例方法
-- **`startMotion(group: string, no: number)`**
-  播放指定分组的动作。
+// 卸载时分别销毁，各自释放 WebGL context
+left.destroy();
+right.destroy();
+```
-  ```typescript
-  viewer.startMotion("TapBody", 0);
-  ```
+> 浏览器对同页 WebGL context 数量有上限（通常约 16 个），请按需创建并在不用时调用 `destroy()`。
-- **`setScale(scale: number)`**
-  设置模型的缩放比例（基于自动计算的基础比例）。
+### 自定义 Cubism Core 地址
-  ```typescript
-  viewer.setScale(0.2);
-  ```
+库默认从内置 CDN 加载 Live2D Cubism Core。可通过 `cubismCoreUrl` 覆盖，或在创建实例前手动预加载：
+```typescript
+// 预加载（可选），多次调用会自动去重
+await Live2DViewer.loadCubismCore("https://your-cdn.com/live2dcubismcore.js");
+const viewer = new Live2DViewer("canvas", {
+  modelPath: "/model.json",
+  cubismCoreUrl: "https://your-cdn.com/live2dcubismcore.js",
+});
+```
-- **`resize()`**
-  手动触发一次重新计算布局（通常在容器大小变化但窗口大小未变时使用）。
+## API
-  ```typescript
-  viewer.resize();
-  ```
+### `new Live2DViewer(canvas, options)`
+- `canvas`: `HTMLCanvasElement | string` —— 用于渲染的 canvas 元素或其 id
+- `options`: `Live2DViewerOptions` —— 配置项
+| 属性 | 类型 | 默认值 | 说明 |
+| --- | --- | --- | --- |
+| `modelPath` | `string` | （必填） | Live2D 模型配置文件 (.json) 的路径 |
+| `scale` | `number` | `1` | 模型初始缩放比例 |
+| `x` | `number` | `0` | 初始 X 轴偏移 |
+| `y` | `number` | `0` | 初始 Y 轴偏移 |
+| `designWidth` | `number` | `1920` | 设计稿宽度（用于适配计算） |
+| `designHeight` | `number` | `1080` | 设计稿高度（用于适配计算） |
+| `autoResize` | `boolean` | `true` | 是否监听窗口 resize 自动调整模型大小 |
+| `interactive` | `boolean` | `true` | 是否响应指针移动进行跟随；设为 `false` 会同时禁用模型自然晃动 |
+| `enableTapBody` | `boolean` | `true` | 是否在点击时触发 `TapBody` 动作 |
+| `cubismCoreUrl` | `string` | 内置 CDN | Cubism Core 库的加载地址 |
+| `onModelLoaded` | `(model) => void` | - | 模型加载完成后的回调 |
+| `onModelError` | `(error: Error) => void` | - | 模型加载失败的回调 |
+### 实例方法
+- **`startMotion(group, no, priority?, startTime?)`** —— 播放指定分组的动作。`priority` 默认 `1`；`startTime`（秒）默认 `0`，大于 0 时从该时间点开始播放。返回 `Promise<boolean>`。
-- **`destroy()`**
-  销毁实例，清理 PIXI 应用及事件监听。
   ```typescript
-  viewer.destroy();
+  await viewer.startMotion("TapBody", 0);
   ```
+- **`expression(name)`** —— 播放指定表情（名称或索引）。
+- **`waitForMotionFinish()`** —— 返回 `Promise<boolean>`，当前动作播放结束后 resolve；无模型时立即 resolve `false`。
+- **`setScale(scale)`** —— 设置模型缩放比例并刷新布局。
+- **`setXY(x, y)`** —— 设置模型偏移并刷新布局。
+- **`resize()`** —— 手动按当前 canvas 尺寸重新计算布局（容器尺寸变化但窗口未变时使用）。
+- **`lockHeadAngle()`** —— 禁用模型的自然晃动（呼吸、身体/头部摇摆等）。注意：尽管命名含 head，实际会关闭**全部**自然动作。
+- **`destroy()`** —— 销毁实例：移除监听、销毁模型，并释放该实例的 PIXI 应用与 WebGL context（不会移除你传入的 canvas）。销毁后该实例不可复用。
+### 静态方法
+- **`Live2DViewer.loadCubismCore(url?)`** —— 预加载 Cubism Core 库，全局按需去重、只真正加载一次；加载失败会抛出明确错误。
 ## 注意事项
-本库依赖 `pixi.js` v6 版本（与 `pixi-live2d-display` 兼容），请确保项目中未安装冲突的 PIXI 版本。
+- 本库依赖 `pixi.js` v6（与 `pixi-live2d-display` 兼容），请确保项目中未安装冲突的 PIXI 版本。
+- 模型适配以 **canvas 的显示尺寸** 为基准，请通过 CSS 给 canvas 设定期望的宽高。
+- `interactive: false` 在禁用指针跟随的同时会关闭模型的自然晃动（等同调用 `lockHeadAngle()`）。

package/dist/{core-DiacFOEI.js → core-DBA9LYvt.js} RENAMED Viewed

@@ -3211,7 +3211,7 @@ var Y = {
 	}), e.IDENTITY = new e(), e;
 }();
 //#endregion
-//#region ../../node_modules/.pnpm/@pixi+display@6.5.2_@pixi+math@6.5.2_@pixi+settings@6.5.2_@pixi+utils@6.5.2_@pixi+constants@6.5.2_@pixi+settings@6.5.2_/node_modules/@pixi/display/dist/esm/display.mjs
+//#region ../../node_modules/.pnpm/@pixi+display@6.5.2_@pixi+m_dbc4d2e5af9caaaf493b57ec65f40b11/node_modules/@pixi/display/dist/esm/display.mjs
 B.SORTABLE_CHILDREN = !1;
 var Vn = function() {
 	function e() {
@@ -3804,7 +3804,7 @@ var gr = function(e) {
 	}), e;
 }();
 //#endregion
-//#region ../../node_modules/.pnpm/@pixi+ticker@6.5.2_@pixi+extensions@6.5.2_@pixi+settings@6.5.2/node_modules/@pixi/ticker/dist/esm/ticker.mjs
+//#region ../../node_modules/.pnpm/@pixi+ticker@6.5.2_@pixi+ex_40a8f4266f4966c790f91b30ddbc0f0c/node_modules/@pixi/ticker/dist/esm/ticker.mjs
 Object.defineProperties(X.prototype, {
 	dispatch: { value: X.prototype.emit },
 	run: { value: X.prototype.emit }

package/dist/{cubism4.es-B18JJVJM.js → cubism4.es-DbGCrqOi.js} RENAMED Viewed

@@ -1,4 +1,4 @@
-import { Bt as e, Kt as t, Lt as n, Rt as r, dn as i, jt as a, nn as o, nt as s } from "./core-DiacFOEI.js";
+import { Bt as e, Kt as t, Lt as n, Rt as r, dn as i, jt as a, nn as o, nt as s } from "./core-DBA9LYvt.js";
 //#region ../../node_modules/.pnpm/pixi-live2d-display@0.4.0_d39e0d9e955e28505b3b8642eca0c111/node_modules/pixi-live2d-display/dist/cubism4.es.js
 var c = Math.pow, l = (e, t, n) => new Promise((r, i) => {
 	var a = (e) => {

package/dist/index.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { $ as e, $t as t, A as n, An as r, At as i, B as a, Bt as o, C as s, Cn as c, Ct as l, D as u, Dn as d, Dt as f, E as p, En as m, Et as h, F as g, Fn as _, Ft as v, G as y, Gt as b, H as x, Ht as S, I as C, In as w, It as T, J as E, Jt as D, K as O, Kt as k, L as A, Ln as j, Lt as M, M as N, Mn as P, Mt as F, N as ee, Nn as te, Nt as ne, O as re, On as ie, Ot as I, P as ae, Pn as oe, Pt as se, Q as L, Qt as R, R as ce, Rn as z, Rt as B, S as V, Sn as le, St as ue, T as de, Tn as fe, Tt as pe, U as me, Ut as H, V as he, Vt as ge, W as _e, Wt as ve, X as ye, Xt as be, Y as xe, Yt as Se, Z as Ce, Zt as we, _ as Te, _n as Ee, _t as De, a as Oe, an as ke, at as Ae, b as je, bn as Me, bt as Ne, c as U, cn as Pe, ct as Fe, d as Ie, dn as Le, dt as Re, en as ze, et as Be, f as Ve, fn as He, ft as Ue, g as We, gn as Ge, gt as Ke, h as qe, hn as Je, ht as Ye, i as Xe, in as Ze, it as Qe, j as $e, jn as W, jt as et, k as tt, kn as nt, kt as rt, l as it, ln as at, lt as ot, m as st, mn as ct, mt as lt, n as ut, nn as dt, nt as G, o as ft, on as pt, ot as mt, p as ht, pn as gt, pt as _t, q as vt, qt as yt, r as bt, rn as xt, rt as St, s as Ct, sn as wt, st as Tt, t as Et, tn as Dt, tt as Ot, u as kt, un as At, ut as jt, v as Mt, vn as Nt, vt as Pt, w as Ft, wn as It, wt as Lt, x as Rt, xn as K, xt as zt, y as Bt, yn as Vt, yt as Ht, z as Ut, zt as Wt } from "./core-DiacFOEI.js";
+import { $ as e, $t as t, A as n, An as r, At as i, B as a, Bt as o, C as s, Cn as c, Ct as l, D as u, Dn as d, Dt as f, E as p, En as m, Et as h, F as g, Fn as _, Ft as v, G as y, Gt as b, H as x, Ht as S, I as C, In as w, It as T, J as E, Jt as D, K as O, Kt as k, L as A, Ln as j, Lt as M, M as N, Mn as P, Mt as F, N as ee, Nn as te, Nt as ne, O as re, On as ie, Ot as I, P as ae, Pn as oe, Pt as se, Q as L, Qt as R, R as ce, Rn as z, Rt as B, S as V, Sn as le, St as ue, T as de, Tn as fe, Tt as pe, U as me, Ut as H, V as he, Vt as ge, W as _e, Wt as ve, X as ye, Xt as be, Y as xe, Yt as Se, Z as Ce, Zt as we, _ as Te, _n as Ee, _t as De, a as Oe, an as ke, at as Ae, b as je, bn as Me, bt as Ne, c as U, cn as Pe, ct as Fe, d as Ie, dn as Le, dt as Re, en as ze, et as Be, f as Ve, fn as He, ft as Ue, g as We, gn as Ge, gt as Ke, h as qe, hn as Je, ht as Ye, i as Xe, in as Ze, it as Qe, j as $e, jn as W, jt as et, k as tt, kn as nt, kt as rt, l as it, ln as at, lt as ot, m as st, mn as ct, mt as lt, n as ut, nn as dt, nt as G, o as ft, on as pt, ot as mt, p as ht, pn as gt, pt as _t, q as vt, qt as yt, r as bt, rn as xt, rt as St, s as Ct, sn as wt, st as Tt, t as Et, tn as Dt, tt as Ot, u as kt, un as At, ut as jt, v as Mt, vn as Nt, vt as Pt, w as Ft, wn as It, wt as Lt, x as Rt, xn as K, xt as zt, y as Bt, yn as Vt, yt as Ht, z as Ut, zt as Wt } from "./core-DBA9LYvt.js";
 typeof globalThis < "u" || typeof self < "u" || typeof window < "u" || Function("return this")();
 async function Gt(e) {
 	return await new Promise(function(t) {
@@ -277,7 +277,7 @@ globalThis.requestAnimationFrame || (globalThis.requestAnimationFrame = function
 	return typeof e == "number" && isFinite(e) && Math.floor(e) === e;
 }), globalThis.ArrayBuffer || (globalThis.ArrayBuffer = Array), globalThis.Float32Array || (globalThis.Float32Array = Array), globalThis.Uint32Array || (globalThis.Uint32Array = Array), globalThis.Uint16Array || (globalThis.Uint16Array = Array), globalThis.Uint8Array || (globalThis.Uint8Array = Array), globalThis.Int32Array || (globalThis.Int32Array = Array);
 //#endregion
-//#region ../../node_modules/.pnpm/@pixi+accessibility@6.5.2_@pixi+core@6.5.2_@pixi+constants@6.5.2_@pixi+extensions@6.5.2_6fa672afef0d0e890b1f89be0296d21a/node_modules/@pixi/accessibility/dist/esm/accessibility.mjs
+//#region ../../node_modules/.pnpm/@pixi+accessibility@6.5.2_@_6fa672afef0d0e890b1f89be0296d21a/node_modules/@pixi/accessibility/dist/esm/accessibility.mjs
 var mn = {
 	accessible: !1,
 	accessibleTitle: null,
@@ -1328,7 +1328,7 @@ var ur = function() {
 }();
 rt.add(or, ur);
 //#endregion
-//#region ../../node_modules/.pnpm/@pixi+compressed-textures@6.5.2_@pixi+constants@6.5.2_@pixi+core@6.5.2_@pixi+constants@_e163e6679f0f4e58c3f6ee8bbe6275c0/node_modules/@pixi/compressed-textures/dist/esm/compressed-textures.mjs
+//#region ../../node_modules/.pnpm/@pixi+compressed-textures@6_e163e6679f0f4e58c3f6ee8bbe6275c0/node_modules/@pixi/compressed-textures/dist/esm/compressed-textures.mjs
 var Y, X;
 (function(e) {
 	e[e.COMPRESSED_RGB_S3TC_DXT1_EXT = 33776] = "COMPRESSED_RGB_S3TC_DXT1_EXT", e[e.COMPRESSED_RGBA_S3TC_DXT1_EXT = 33777] = "COMPRESSED_RGBA_S3TC_DXT1_EXT", e[e.COMPRESSED_RGBA_S3TC_DXT3_EXT = 33778] = "COMPRESSED_RGBA_S3TC_DXT3_EXT", e[e.COMPRESSED_RGBA_S3TC_DXT5_EXT = 33779] = "COMPRESSED_RGBA_S3TC_DXT5_EXT", e[e.COMPRESSED_SRGB_ALPHA_S3TC_DXT1_EXT = 35917] = "COMPRESSED_SRGB_ALPHA_S3TC_DXT1_EXT", e[e.COMPRESSED_SRGB_ALPHA_S3TC_DXT3_EXT = 35918] = "COMPRESSED_SRGB_ALPHA_S3TC_DXT3_EXT", e[e.COMPRESSED_SRGB_ALPHA_S3TC_DXT5_EXT = 35919] = "COMPRESSED_SRGB_ALPHA_S3TC_DXT5_EXT", e[e.COMPRESSED_SRGB_S3TC_DXT1_EXT = 35916] = "COMPRESSED_SRGB_S3TC_DXT1_EXT", e[e.COMPRESSED_R11_EAC = 37488] = "COMPRESSED_R11_EAC", e[e.COMPRESSED_SIGNED_R11_EAC = 37489] = "COMPRESSED_SIGNED_R11_EAC", e[e.COMPRESSED_RG11_EAC = 37490] = "COMPRESSED_RG11_EAC", e[e.COMPRESSED_SIGNED_RG11_EAC = 37491] = "COMPRESSED_SIGNED_RG11_EAC", e[e.COMPRESSED_RGB8_ETC2 = 37492] = "COMPRESSED_RGB8_ETC2", e[e.COMPRESSED_RGBA8_ETC2_EAC = 37496] = "COMPRESSED_RGBA8_ETC2_EAC", e[e.COMPRESSED_SRGB8_ETC2 = 37493] = "COMPRESSED_SRGB8_ETC2", e[e.COMPRESSED_SRGB8_ALPHA8_ETC2_EAC = 37497] = "COMPRESSED_SRGB8_ALPHA8_ETC2_EAC", e[e.COMPRESSED_RGB8_PUNCHTHROUGH_ALPHA1_ETC2 = 37494] = "COMPRESSED_RGB8_PUNCHTHROUGH_ALPHA1_ETC2", e[e.COMPRESSED_SRGB8_PUNCHTHROUGH_ALPHA1_ETC2 = 37495] = "COMPRESSED_SRGB8_PUNCHTHROUGH_ALPHA1_ETC2", e[e.COMPRESSED_RGB_PVRTC_4BPPV1_IMG = 35840] = "COMPRESSED_RGB_PVRTC_4BPPV1_IMG", e[e.COMPRESSED_RGBA_PVRTC_4BPPV1_IMG = 35842] = "COMPRESSED_RGBA_PVRTC_4BPPV1_IMG", e[e.COMPRESSED_RGB_PVRTC_2BPPV1_IMG = 35841] = "COMPRESSED_RGB_PVRTC_2BPPV1_IMG", e[e.COMPRESSED_RGBA_PVRTC_2BPPV1_IMG = 35843] = "COMPRESSED_RGBA_PVRTC_2BPPV1_IMG", e[e.COMPRESSED_RGB_ETC1_WEBGL = 36196] = "COMPRESSED_RGB_ETC1_WEBGL", e[e.COMPRESSED_RGB_ATC_WEBGL = 35986] = "COMPRESSED_RGB_ATC_WEBGL", e[e.COMPRESSED_RGBA_ATC_EXPLICIT_ALPHA_WEBGL = 35986] = "COMPRESSED_RGBA_ATC_EXPLICIT_ALPHA_WEBGL", e[e.COMPRESSED_RGBA_ATC_INTERPOLATED_ALPHA_WEBGL = 34798] = "COMPRESSED_RGBA_ATC_INTERPOLATED_ALPHA_WEBGL";
@@ -5491,7 +5491,7 @@ var $o = "varying vec2 vTextureCoord;\nuniform sampler2D uSampler;\nuniform floa
 }(Rt);
 es.prototype.grayscale = es.prototype.greyscale;
 //#endregion
-//#region ../../node_modules/.pnpm/@pixi+filter-displacement@6.5.2_@pixi+core@6.5.2_@pixi+constants@6.5.2_@pixi+extensions_6c8bdb756a202d74aaa77fd3eb3cd558/node_modules/@pixi/filter-displacement/dist/esm/filter-displacement.mjs
+//#region ../../node_modules/.pnpm/@pixi+filter-displacement@6_6c8bdb756a202d74aaa77fd3eb3cd558/node_modules/@pixi/filter-displacement/dist/esm/filter-displacement.mjs
 var ts = function(e, t) {
 	return ts = Object.setPrototypeOf || { __proto__: [] } instanceof Array && function(e, t) {
 		e.__proto__ = t;
@@ -5691,7 +5691,7 @@ var Is = function() {
 	return e;
 }();
 //#endregion
-//#region ../../node_modules/.pnpm/@pixi+mixin-get-global-position@6.5.2_@pixi+display@6.5.2_@pixi+math@6.5.2_@pixi+settin_028b3c491a57204327251ef324f60475/node_modules/@pixi/mixin-get-global-position/dist/esm/mixin-get-global-position.mjs
+//#region ../../node_modules/.pnpm/@pixi+mixin-get-global-posi_028b3c491a57204327251ef324f60475/node_modules/@pixi/mixin-get-global-position/dist/esm/mixin-get-global-position.mjs
 Object.defineProperties(F.prototype, {
 	cacheAsBitmapResolution: {
 		get: function() {
@@ -5795,7 +5795,7 @@ Object.defineProperties(F.prototype, {
 	return e === void 0 && (e = new o()), t === void 0 && (t = !1), this.parent ? this.parent.toGlobal(this.position, e, t) : (e.x = this.position.x, e.y = this.position.y), e;
 };
 //#endregion
-//#region ../../node_modules/.pnpm/@pixi+app@6.5.2_@pixi+core@6.5.2_@pixi+constants@6.5.2_@pixi+extensions@6.5.2_@pixi+mat_d997c290ef5e4553ddd5c6768aff9f1c/node_modules/@pixi/app/dist/esm/app.mjs
+//#region ../../node_modules/.pnpm/@pixi+app@6.5.2_@pixi+core@_d997c290ef5e4553ddd5c6768aff9f1c/node_modules/@pixi/app/dist/esm/app.mjs
 var Ls = function() {
 	function e() {}
 	return e.init = function(e) {
@@ -6428,7 +6428,7 @@ var nl = function() {
 }();
 rt.handleByList(I.Application, nl._plugins), rt.add(Ls);
 //#endregion
-//#region ../../node_modules/.pnpm/@pixi+mesh-extras@6.5.2_@pixi+constants@6.5.2_@pixi+core@6.5.2_@pixi+constants@6.5.2_@p_2c67296e184f7a20c4c1bea5a2db14c2/node_modules/@pixi/mesh-extras/dist/esm/mesh-extras.mjs
+//#region ../../node_modules/.pnpm/@pixi+mesh-extras@6.5.2_@pi_2c67296e184f7a20c4c1bea5a2db14c2/node_modules/@pixi/mesh-extras/dist/esm/mesh-extras.mjs
 var rl = function(e, t) {
 	return rl = Object.setPrototypeOf || { __proto__: [] } instanceof Array && function(e, t) {
 		e.__proto__ = t;
@@ -6958,48 +6958,45 @@ var gl = {
 	DisplacementFilter: as,
 	FXAAFilter: us,
 	NoiseFilter: ms
-}, _l = "https://a0.seayooassets.com/web/libs/live2dcubismcore.js", vl = Gt(_l), yl = vl.then(() => import("./cubism4.es-B18JJVJM.js")), bl = class e {
-	static sharedApp = null;
+}, _l = "https://a0.seayooassets.com/web/libs/live2dcubismcore.js", vl = null;
+function yl() {
+	return vl ||= import("./cubism4.es-DbGCrqOi.js"), vl;
+}
+var bl = class e {
 	static coreLoadingPromise = null;
 	static async loadCubismCore(e = _l) {
-		this.coreLoadingPromise ||= Gt(e), await this.coreLoadingPromise;
+		if (this.coreLoadingPromise ||= Gt(e), !await this.coreLoadingPromise) throw this.coreLoadingPromise = null, Error(`Failed to load Live2D Cubism Core from "${e}"`);
 	}
-	static loadingToken = 0;
-	static hasWarmedUp = !1;
 	app;
 	model = null;
 	options;
-	constructor(t, n) {
-		this.options = n, window.PIXI || (window.PIXI = hl);
-		let r;
-		if (typeof t == "string") {
-			let e = document.getElementById(t);
-			if (!e) throw Error(`Canvas element with id "${t}" not found.`);
-			if (!(e instanceof HTMLCanvasElement)) throw Error(`Element with id "${t}" is not a canvas.`);
-			r = e;
-		} else r = t;
-		if (!e.sharedApp) {
-			let t = window.devicePixelRatio || 1, n = r.getBoundingClientRect(), i = Math.max(n.width, 100), a = Math.max(n.height, 100);
-			r.width = i * t, r.height = a * t, e.sharedApp = new nl({
-				view: r,
-				resizeTo: r,
-				backgroundAlpha: 0,
-				autoStart: !0,
-				sharedTicker: !0,
-				resolution: t
-			}), e.sharedApp.renderer.resolution = t;
-		} else if (e.sharedApp.view !== r) {
-			let t = r.parentElement, n = e.sharedApp.view;
-			t && (n.className = r.className, n.style.cssText = r.style.cssText, r.id && (n.id = r.id), t.replaceChild(n, r));
-		}
-		this.app = e.sharedApp, this.init(), this.options.autoResize !== !1 && window.addEventListener("resize", this.handleResize);
+	loadingToken = 0;
+	hasWarmedUp = !1;
+	constructor(e, t) {
+		this.options = t, window.PIXI || (window.PIXI = hl);
+		let n;
+		if (typeof e == "string") {
+			let t = document.getElementById(e);
+			if (!t) throw Error(`Canvas element with id "${e}" not found.`);
+			if (!(t instanceof HTMLCanvasElement)) throw Error(`Element with id "${e}" is not a canvas.`);
+			n = t;
+		} else n = e;
+		let r = window.devicePixelRatio || 1, i = n.getBoundingClientRect(), a = Math.max(i.width, 100), o = Math.max(i.height, 100);
+		n.width = a * r, n.height = o * r, this.app = new nl({
+			view: n,
+			resizeTo: n,
+			backgroundAlpha: 0,
+			autoStart: !0,
+			sharedTicker: !0,
+			resolution: r
+		}), this.init(), this.options.autoResize !== !1 && window.addEventListener("resize", this.handleResize);
 	}
 	async init() {
 		try {
-			let t = ++e.loadingToken;
+			let t = ++this.loadingToken;
 			await e.loadCubismCore(this.options.cubismCoreUrl);
-			let { Live2DModel: n } = await yl, r = await n.from(this.options.modelPath);
-			if (t !== e.loadingToken) {
+			let { Live2DModel: n } = await yl(), r = await n.from(this.options.modelPath);
+			if (t !== this.loadingToken) {
 				r.destroy({
 					children: !0,
 					texture: !0,
@@ -7007,8 +7004,8 @@ var gl = {
 				});
 				return;
 			}
-			if (!e.hasWarmedUp) {
-				e.hasWarmedUp = !0, this.app.stage.addChild(r);
+			if (!this.hasWarmedUp) {
+				this.hasWarmedUp = !0, this.app.stage.addChild(r);
 				try {
 					this.app.renderer.render(this.app.stage);
 				} catch {}
@@ -7016,8 +7013,8 @@ var gl = {
 					children: !0,
 					texture: !0,
 					baseTexture: !0
-				}), await new Promise((e) => requestAnimationFrame(() => e())), t !== e.loadingToken) return;
-				if (r = await n.from(this.options.modelPath), t !== e.loadingToken) {
+				}), await new Promise((e) => requestAnimationFrame(() => e())), t !== this.loadingToken) return;
+				if (r = await n.from(this.options.modelPath), t !== this.loadingToken) {
 					r.destroy({
 						children: !0,
 						texture: !0,
@@ -7054,8 +7051,10 @@ var gl = {
 	};
 	resize() {
 		if (!this.model || !this.app) return;
-		let e = window.innerWidth / (this.options.designWidth || 1920), t = window.innerHeight / (this.options.designHeight || 1080), n = Math.min(e, t);
-		this.app.stage.scale.set(n, n), this.model.scale.set(this.options.scale, this.options.scale), this.model.x = (this.options.x || 0) * n, this.model.y = (this.options.y || 0) * n;
+		let e = this.app.view.getBoundingClientRect(), t = e.width || window.innerWidth, n = e.height || window.innerHeight, r = t / (this.options.designWidth || 1920), i = n / (this.options.designHeight || 1080), a = Math.min(r, i);
+		this.app.stage.scale.set(a, a);
+		let o = this.options.scale ?? 1;
+		this.model.scale.set(o, o), this.model.x = (this.options.x || 0) * a, this.model.y = (this.options.y || 0) * a;
 	}
 	setScale(e) {
 		this.options.scale = e, this.resize();
@@ -7083,24 +7082,30 @@ var gl = {
 	}
 	waitForMotionFinish() {
 		return new Promise((e) => {
-			let t = () => {
-				if (!this.model) return !1;
-				this.model.internalModel.motionManager.off("motionFinish", t), e(!0);
+			if (!this.model) {
+				e(!1);
+				return;
+			}
+			let t = this.model.internalModel.motionManager, n = () => {
+				t.off("motionFinish", n), e(!0);
 			};
-			if (!this.model) return !1;
-			this.model.internalModel.motionManager.on("motionFinish", t);
+			t.on("motionFinish", n);
 		});
 	}
 	destroy() {
-		this.options.autoResize !== !1 && window.removeEventListener("resize", this.handleResize), this.model &&= (this.app.stage.removeChild(this.model), this.model.destroy({
+		this.options.autoResize !== !1 && window.removeEventListener("resize", this.handleResize), this.loadingToken++, this.model &&= (this.app.stage.removeChild(this.model), this.model.destroy({
 			children: !0,
 			texture: !0,
 			baseTexture: !0
-		}), null);
+		}), null), this.app.destroy(!1, {
+			children: !0,
+			texture: !0,
+			baseTexture: !0
+		});
 	}
 };
 function xl(e) {
 	return e instanceof Error ? e : Error(String(e));
 }
 //#endregion
-export { bl as Live2DViewer, vl as coreLoadPromise };
+export { bl as Live2DViewer };

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@seayoo-web/pixi-live2d",
-  "version": "0.1.1",
+  "version": "1.0.0",
   "description": "pixi-live2d viewer",
   "keywords": [
     "pixi-live2d"
@@ -39,18 +39,20 @@
   },
   "devDependencies": {
     "@types/node": "^22.13.1",
-    "@seayoo-web/tsconfig": "^1.0.6",
-    "@seayoo-web/utils": "^4.5.2"
+    "@vitest/coverage-istanbul": "^4.1.4",
+    "happy-dom": "^13.10.1",
+    "vitest": "^4.1.4",
+    "@seayoo-web/utils": "^4.5.4",
+    "@seayoo-web/tsconfig": "^1.0.6"
   },
   "engines": {
     "node": ">=22"
   },
   "scripts": {
-    "build": "vite build && tsc --build --force --emitDeclarationOnly",
+    "build": "vite build && tsc --build --emitDeclarationOnly",
     "type-check": "tsc --noEmit",
     "lint": "oxlint -c ../../oxlint.config.mjs",
     "lint:fix": "oxlint -c ../../oxlint.config.mjs --fix",
-    "prepublish": "pnpm lint:fix && pnpm build",
     "test": "vitest --dom",
     "coverage": "vitest run --coverage"
   }

package/types/index.d.ts CHANGED Viewed

@@ -1,6 +1,4 @@
 import * as PIXI from "pixi.js";
-declare const coreLoadPromise: Promise<boolean>;
-export { coreLoadPromise };
 import type { InternalModel as InternalModelType, Live2DModel as Live2DModelType } from "pixi-live2d-display/cubism4";
 export type { MotionPriority } from "pixi-live2d-display/cubism4";
 declare global {
@@ -36,8 +34,6 @@ export interface Live2DViewerOptions {
     onModelError?: (error: Error) => void;
 }
 export declare class Live2DViewer {
-    /** 单例 PIXI 应用 */
-    static sharedApp: PIXI.Application | null;
     /** 引擎加载状态 Promise，用于确保全局只加载一次 Core 库 */
     private static coreLoadingPromise;
     /**
@@ -45,16 +41,16 @@ export declare class Live2DViewer {
      * @param url - Core 库的 URL 地址
      */
     static loadCubismCore(url?: string): Promise<void>;
-    /** 最新发起的加载任务 token，防频繁加载的竞态泄漏 */
-    private static loadingToken;
-    /** 整个页面生命周期内 Cubism 渲染管线是否已完成首次预热 */
-    private static hasWarmedUp;
-    /** PIXI 应用实例 */
+    /** PIXI 应用实例（每个 viewer 独立，持有各自的 canvas / stage / WebGL context） */
     app: PIXI.Application;
     /** Live2D 模型实例 */
     model: Live2DModelType<InternalModelType> | null;
-    /** 配置项副本 */
+    /** 配置项 */
     private options;
+    /** 最新发起的加载任务 token，防同一实例内频繁加载的竞态泄漏 */
+    private loadingToken;
+    /** 该实例（WebGL context）的渲染管线是否已完成首次预热 */
+    private hasWarmedUp;
     /**
      * 创建 Live2D 查看器实例
      * @param canvas - 用于渲染的 Canvas 元素或其 ID
@@ -66,8 +62,10 @@ export declare class Live2DViewer {
     /** 设置点击交互 */
     private setupInteraction;
     /**
-     * 锁定头部角度参数，防止 motion 驱动头部晃动
-     * 在 ticker 里 motion 更新之后强制覆盖为 0
+     * 禁用模型的自然晃动（呼吸、身体/头部摇摆等）。
+     *
+     * 实现方式是把 internalModel 的 updateNaturalMovements 覆写为空操作。
+     * 注意：尽管方法名含 head，实际会关闭**全部**自然动作，而不仅是头部角度。
      */
     lockHeadAngle(): void;
     /** 窗口大小改变的处理函数 */