@tomiaa/live2d
Version:
208 lines (207 loc) • 8.39 kB
JavaScript
import './style.css';
var c = Object.defineProperty;
var g = (s, t, e) => t in s ? c(s, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : s[t] = e;
var i = (s, t, e) => (g(s, typeof t != "symbol" ? t + "" : t, e), e);
import { Hitokoto as L } from "@tomiaa/hitokoto";
import { createNamespacs as m, drag as v, randomInteger as M } from "@tomiaa/utils";
import { DEFAULT_OPTIONS as y } from "./constants.js";
import { JSLoader as r } from "./modules/loader.js";
import { PIXIManager as p } from "./modules/pixi.js";
import { UICreator as l } from "./modules/ui.js";
import { ModelManager as h } from "./modules/model.js";
import { ResizeManager as x } from "./modules/resize.js";
import { AnimationManager as a } from "./modules/animation.js";
import { URLHelper as d } from "./utils/url.js";
import "./index.scss.js";
const f = m("live2d");
class S {
constructor(t) {
// 配置参数默认值
i(this, "options", {
...y
});
// dom 容器
i(this, "el");
// canvas
i(this, "canvas");
// 模型加载模块
i(this, "Live2DModel");
// pixi.js 应用
i(this, "app");
// loading
i(this, "loading", !1);
// 当前模型
i(this, "model");
// 模型列表
i(this, "modelList", []);
// 当前模型配置
i(this, "currentModelOption");
// 模型下标
i(this, "personIndex", 0);
// 服装下标
i(this, "clothingIndex", 0);
// loading dom 元素
i(this, "elLoading");
// control dom 元素
i(this, "elControl");
// 切换人物 dom 元素
i(this, "elSwitchPerson");
// 切换服装 dom 元素
i(this, "elSwitchClothing");
// 收起按钮 dom 元素
i(this, "elCollapse");
// 展开按钮 dom 元素
i(this, "elExpand");
// 一言 dom 元素
i(this, "elHitokoto");
// 一言
i(this, "hitokoto");
// 是否已收起
i(this, "isCollapsed", !1);
Object.assign(this.options, t);
const { el: e } = this.options;
typeof e == "string" ? this.el = document.querySelector(e) : this.el = e, this.el.classList.add(f.b()), this.init();
}
get getJsBaseURL() {
return d.getJsBaseURL(this.options.jsBaseURL);
}
get getLive2d_2_ModelBaseURL() {
return d.getLive2d_2_ModelBaseURL(
this.options.live2d_2_ModelBaseURL,
this.getJsBaseURL
);
}
get getLive2d_3_ModelBaseURL() {
return d.getLive2d_3_ModelBaseURL(
this.options.live2d_3_ModelBaseURL,
this.getJsBaseURL
);
}
// 初始化
async init() {
var t, e, o, n;
await ((e = (t = this.options).beforeInit) == null ? void 0 : e.call(t, {
options: this.options,
modelList: this.modelList
})), this.options.allowDrag && v({ el: this.el }), await this.loadJS(), this.createPIXI(), await this.loadModelList(), this.addLoadingSvg(), this.addControls(), this.elExpand || (this.elExpand = l.createExpandButton(this.expand.bind(this)), this.elExpand.style.display = "none"), this.setPersonIndex(), await this.loadModel(), window.addEventListener("resize", this.onresize.bind(this)), this.createHitokoto(), (n = (o = this.options).afterInit) == null || n.call(o, {
options: this.options,
modelList: this.modelList,
currentModelOption: this.currentModelOption,
Live2DModel: this.Live2DModel,
app: this.app
});
}
// 加载依赖
async loadJS() {
await r.loadAll(this.getJsBaseURL), this.Live2DModel = r.getLive2DModel();
}
// 创建渲染器
createPIXI() {
this.canvas || (this.canvas = p.createCanvas(this.el), this.canvas.addEventListener("click", this.animation.bind(this))), this.app = p.create(this.canvas, this.options.iApplicationOptions);
}
// 创建模型列表
async loadModelList() {
this.modelList = h.loadModelList(
this.options.loadLive2d_2 ?? !0,
this.options.loadLive2d_3 ?? !0
);
}
// 添加 loadingSvg
addLoadingSvg() {
this.options.showLoading && (this.elLoading = l.createLoading(this.el));
}
// 添加控制栏
addControls() {
if (!this.options.showControl)
return;
const t = l.createControls(
this.el,
this.switchPerson.bind(this),
this.switchClothing.bind(this),
this.collapse.bind(this)
);
this.elControl = t.elControl, this.elSwitchPerson = t.elSwitchPerson, this.elSwitchClothing = t.elSwitchClothing, this.elCollapse = t.elCollapse;
}
// 加载模型
async loadModel() {
var e, o, n;
this.loading = !0, this.el.style.pointerEvents = "none", this.elLoading && (this.elLoading.style.display = "block"), this.elControl && (this.elControl.style.display = "none"), this.elHitokoto && (this.elHitokoto.style.display = "none", (e = this.hitokoto) == null || e.getData()), (n = (o = this.model) == null ? void 0 : o.destroy) == null || n.call(o);
const t = h.getModelBaseURL(
this.currentModelOption.version,
this.options.live2d_2_ModelBaseURL,
this.options.live2d_3_ModelBaseURL,
this.getJsBaseURL
);
try {
this.model = await h.loadModel(
this.Live2DModel,
this.currentModelOption,
this.clothingIndex,
t
);
} catch {
this.elLoading && (this.elLoading.style.display = "none");
}
this.loading = !1, this.el.style.pointerEvents = "auto", this.elLoading && (this.elLoading.style.display = "none"), this.elControl && (this.elControl.style.display = "block"), this.elHitokoto && (this.elHitokoto.style.display = "block"), this.app.stage.addChild(this.model), this.onresize(), this.options.playLoadingAnimation && a.playMotion(this.model, "login");
}
setPersonIndex() {
this.options.randomPeople ? this.personIndex = M(0, this.modelList.length - 1) : ++this.personIndex >= this.modelList.length && (this.personIndex = 0), this.currentModelOption = this.modelList[this.personIndex], l.updateSwitchClothingVisibility(
this.elSwitchClothing,
this.currentModelOption.list.length > 1
);
}
// 设置宽高比
onresize() {
!this.model || !this.app || !this.currentModelOption || x.resize(
this.app,
this.model,
this.currentModelOption,
this.options.maxWidth,
this.options.minWidth,
this.options.aspectRatio
);
}
// 动画
animation(t) {
if (this.model) {
if (typeof t == "string") {
a.playMotion(this.model, t);
return;
}
a.handleClickAnimation(this.model, t);
}
}
// 切换人物
switchPerson() {
event == null || event.stopPropagation(), this.clothingIndex = 0, this.setPersonIndex(), this.loadModel();
}
// 更换服装
switchClothing() {
event == null || event.stopPropagation(), ++this.clothingIndex >= this.currentModelOption.list.length && (this.clothingIndex = 0), this.loadModel();
}
// 创建一言
createHitokoto() {
this.options.hitokoto && (this.elHitokoto = document.createElement("div"), this.el.appendChild(this.elHitokoto), this.elHitokoto.addEventListener("mousedown", (t) => {
t.stopPropagation();
}), this.hitokoto = new L({
el: this.elHitokoto,
...this.options.hitokotoOptions
}));
}
// 收起
collapse() {
event == null || event.stopPropagation(), this.isCollapsed = !0, this.el.style.display = "none", this.elExpand || (this.elExpand = l.createExpandButton(this.expand.bind(this))), this.elExpand && (this.elExpand.style.display = "flex", this.elExpand.style.zIndex = "2001");
}
// 展开
async expand() {
event == null || event.stopPropagation(), this.isCollapsed = !1, this.elExpand && (this.elExpand.style.display = "none"), this.el.innerHTML = "", this.el.style.display = "", this.model = void 0, this.app = void 0, this.canvas = void 0, this.elLoading = void 0, this.elControl = void 0, this.elSwitchPerson = void 0, this.elSwitchClothing = void 0, this.elCollapse = void 0, this.elHitokoto = void 0, this.hitokoto = void 0, this.modelList = [], this.currentModelOption = void 0, this.personIndex = 0, this.clothingIndex = 0, this.loading = !1, this.Live2DModel = void 0, window.removeEventListener("resize", this.onresize.bind(this)), await this.init();
}
// 销毁
destroy() {
window.removeEventListener("resize", this.onresize), this.elExpand && this.elExpand.parentNode && this.elExpand.parentNode.removeChild(this.elExpand), this.el.innerHTML = "";
}
}
export {
S as Live2d,
S as default
};