From 8f0a9789328b50c628709c25edc506a24b9317ea Mon Sep 17 00:00:00 2001 From: Hacxy Date: Fri, 22 Mar 2024 16:47:56 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BC=98=E5=8C=96=E7=8A=B6=E6=80=81?= =?UTF-8?q?=E6=9D=A1=E6=A8=A1=E5=9D=97,=20=E5=8F=96=E6=B6=88=E4=BA=86loadO?= =?UTF-8?q?ml2d=E6=96=B9=E6=B3=95=E7=9A=84=E8=B0=83=E7=94=A8=E6=AC=A1?= =?UTF-8?q?=E6=95=B0=E9=99=90=E5=88=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/oh-my-live2d/src/config/config.ts | 11 +- .../{globalStyle.ts => global-style.ts} | 0 packages/oh-my-live2d/src/modules/index.ts | 20 +- .../oh-my-live2d/src/modules/load-oml2d.ts | 86 +++++++ packages/oh-my-live2d/src/modules/menus.ts | 14 +- packages/oh-my-live2d/src/modules/oml2d.ts | 101 ++++----- packages/oh-my-live2d/src/modules/stage.ts | 32 +-- .../oh-my-live2d/src/modules/status-bar.ts | 212 +++++++++--------- packages/oh-my-live2d/src/types/common.ts | 7 +- tests/vite-app/src/main.ts | 11 +- tests/vue-app/src/App.vue | 10 +- tests/vue-app/vite.config.ts | 48 ++-- 12 files changed, 324 insertions(+), 228 deletions(-) rename packages/oh-my-live2d/src/modules/{globalStyle.ts => global-style.ts} (100%) create mode 100644 packages/oh-my-live2d/src/modules/load-oml2d.ts diff --git a/packages/oh-my-live2d/src/config/config.ts b/packages/oh-my-live2d/src/config/config.ts index 5b056b5..1b1422f 100644 --- a/packages/oh-my-live2d/src/config/config.ts +++ b/packages/oh-my-live2d/src/config/config.ts @@ -61,7 +61,16 @@ export const DEFAULT_OPTIONS: DefaultOptions = { icon: 'icon-rest', title: '休息', onClick(oml2d): void { - oml2d.switchStatus(); + oml2d.statusBarPopup('看板娘休息中', false); + + oml2d.clearTips(); + + oml2d.setStatusBarClickEvent(() => { + oml2d.statusBarPopup(); + void oml2d.stageSlideIn(); + }); + + void oml2d.stageSlideOut(); } }, { diff --git a/packages/oh-my-live2d/src/modules/globalStyle.ts b/packages/oh-my-live2d/src/modules/global-style.ts similarity index 100% rename from packages/oh-my-live2d/src/modules/globalStyle.ts rename to packages/oh-my-live2d/src/modules/global-style.ts diff --git a/packages/oh-my-live2d/src/modules/index.ts b/packages/oh-my-live2d/src/modules/index.ts index 0c16fce..e324900 100644 --- a/packages/oh-my-live2d/src/modules/index.ts +++ b/packages/oh-my-live2d/src/modules/index.ts @@ -1,19 +1,11 @@ -import { OhMyLive2D } from './oml2d.js'; -import { DEFAULT_OPTIONS } from '../config/index.js'; -import { OML2D } from '../types/common.js'; -import type { DefaultOptions, Options } from '../types/index.js'; -import { loadOml2dSDK, mergeOptions } from '../utils/index.js'; +import { LoadOhMyLive2D } from './load-oml2d.js'; +import type { Options } from '../types/index.js'; -export const bootstrap = (): ((options: Options) => Promise) => { - let oml2d: OhMyLive2D; - let finalOptions: DefaultOptions = DEFAULT_OPTIONS; - const loadOml2d = async (options: Options): Promise => { - finalOptions = mergeOptions(DEFAULT_OPTIONS, options); - const { PIXI, PixiLive2dDisplay } = await loadOml2dSDK(finalOptions.importType, finalOptions.libraryUrls); +export const bootstrap = (): ((options: Options) => Promise) => { + const loadOml2d = async (options: Options): Promise => { + const oml2d = new LoadOhMyLive2D(); - oml2d?.unMount(); - oml2d = new OhMyLive2D(finalOptions, PIXI, PixiLive2dDisplay); - await oml2d.initialize(); + await oml2d.setup(options); return oml2d; }; diff --git a/packages/oh-my-live2d/src/modules/load-oml2d.ts b/packages/oh-my-live2d/src/modules/load-oml2d.ts new file mode 100644 index 0000000..a54d49a --- /dev/null +++ b/packages/oh-my-live2d/src/modules/load-oml2d.ts @@ -0,0 +1,86 @@ +import { OhMyLive2D } from './oml2d.js'; +import { DEFAULT_OPTIONS } from '../config/index.js'; +import type { EventType } from '../types/common.js'; +import { DefaultOptions } from '../types/index.js'; +import { Options } from '../types/options.js'; +import { loadOml2dSDK, mergeOptions } from '../utils/index.js'; + +export class LoadOhMyLive2D { + options: DefaultOptions = DEFAULT_OPTIONS; + private oml2d?: OhMyLive2D; + + /** + * 安装组件 + */ + async setup(options: Options): Promise { + this.options = mergeOptions(DEFAULT_OPTIONS, options); + + const { PIXI, PixiLive2dDisplay } = await loadOml2dSDK(this.options.importType, this.options.libraryUrls); + + this.oml2d = new OhMyLive2D(this, PIXI, PixiLive2dDisplay); + + await this.oml2d.initialize(); + } + + /** + * 主动提示消息 + * @param message 提示信息 + * @param duration 持续时间 默认值: 3000 + * @param priority 优先级 默认值: 3 + */ + tipsMessage(message: string, duration?: number, priority?: number): void { + this.oml2d?.tips.notification(message, duration, priority); + } + + /** + * 加载下一个模型 + */ + async loadNextModel(): Promise { + await this.oml2d?.loadNextModel(); + } + + /** + * 重新加载当前模型 + */ + async reloadModel(): Promise { + await this.oml2d?.reloadModel(); + } + + /** + * 舞台滑入 + */ + async stageSlideIn(): Promise { + await this.oml2d?.stage.slideIn(); + } + + /** + * 舞台滑出 + */ + async stageSlideOut(): Promise { + await this.oml2d?.stage.slideOut(); + } + + clearTips(): void { + this.oml2d?.tips.clear(); + } + + stopTipsIdle(): void { + this.oml2d?.tips.idlePlayer?.stop(); + } + + startTipsIdle(): void { + void this.oml2d?.tips.idlePlayer?.start(); + } + + statusBarPopup(message?: string, delay?: number | false, color?: string): void { + this.oml2d?.statusBar.popup(message, delay, color); + } + + setStatusBarClickEvent(fn: EventType): void { + this.oml2d?.statusBar.setClickEvent(fn); + } + + setStatusBarHoverEvent(events?: { onIn?: EventType; onOut?: EventType }): void { + this.oml2d?.statusBar.setHoverEvent(events); + } +} diff --git a/packages/oh-my-live2d/src/modules/menus.ts b/packages/oh-my-live2d/src/modules/menus.ts index 14a338d..40b9994 100644 --- a/packages/oh-my-live2d/src/modules/menus.ts +++ b/packages/oh-my-live2d/src/modules/menus.ts @@ -1,8 +1,9 @@ import { isArray, isFunction, mergeDeep } from 'tianjie'; +import { LoadOhMyLive2D } from './load-oml2d.js'; import { DEFAULT_OPTIONS, ELEMENT_ID } from '../config/index.js'; import { WindowSizeType } from '../constants/index.js'; -import { Item, OML2D } from '../types/common.js'; +import { Item } from '../types/common.js'; import type { CSSProperties, DefaultOptions, MenusOptions } from '../types/index.js'; import { createElement, getWindowSizeType, handleCommonStyle, setStyleForElement } from '../utils/index.js'; @@ -14,7 +15,7 @@ export class Menus { constructor( private options: DefaultOptions, - private oml2d: OML2D + private publicOml2d: LoadOhMyLive2D ) {} private get menuOptions(): MenusOptions { @@ -28,22 +29,19 @@ export class Menus { tagName: 'div', dataName: item.id, className: 'oml2d-menus-item', - innerHtml: ` - - - -` + innerHtml: `` }); el.title = item.title; el.onclick = (): void => { - item.onClick?.(this.oml2d); + void item.onClick?.(this.publicOml2d); }; return el; }); } + createMenuItem(): void { if (isArray(this.menuOptions.items)) { this.createMenuItemElements(this.menuOptions.items); diff --git a/packages/oh-my-live2d/src/modules/oml2d.ts b/packages/oh-my-live2d/src/modules/oml2d.ts index 46ecc9a..9932987 100644 --- a/packages/oh-my-live2d/src/modules/oml2d.ts +++ b/packages/oh-my-live2d/src/modules/oml2d.ts @@ -1,5 +1,7 @@ import { Application } from './application.js'; -import { GlobalStyle } from './globalStyle.js'; +import { GlobalStyle } from './global-style.js'; +// import { LoadOhMyLive2D } from './load-oml2d.js'; +import { LoadOhMyLive2D } from './load-oml2d.js'; import { Menus } from './menus.js'; import { Models } from './models.js'; import { Stage } from './stage.js'; @@ -11,27 +13,28 @@ import type { DefaultOptions, PixiLive2dDisplayModule, PixiModule } from '../typ import { checkVersion, getWindowSizeType, onChangeWindowSize, printProjectInfo } from '../utils/index.js'; export class OhMyLive2D { - private store: Store; - private globalStyle: GlobalStyle; - private stage: Stage; - private statusBar: StatusBar; - private tips: Tips; - private menus: Menus; - private models: Models; - private application?: Application; - private currentModelIndex: number = 0; - + store: Store; + globalStyle: GlobalStyle; + stage: Stage; + statusBar: StatusBar; + tips: Tips; + menus: Menus; + models: Models; + application?: Application; + currentModelIndex: number = 0; + options: DefaultOptions; constructor( - private options: DefaultOptions, + private publicOml2d: LoadOhMyLive2D, private PIXI: PixiModule, private PixiLive2dDisplay: PixiLive2dDisplayModule ) { - this.globalStyle = new GlobalStyle(options); - this.stage = new Stage(options); // 实例化舞台 - this.statusBar = new StatusBar(options); - this.tips = new Tips(options); // 提示框 - this.menus = new Menus(options, this); // 菜单 - this.models = new Models(options, this.PixiLive2dDisplay); + this.options = this.publicOml2d.options; + this.globalStyle = new GlobalStyle(this.options); + this.stage = new Stage(this.options); // 实例化舞台 + this.statusBar = new StatusBar(this.options); + this.tips = new Tips(this.options); // 提示框 + this.menus = new Menus(this.options, this.publicOml2d); // 菜单 + this.models = new Models(this.options, this.PixiLive2dDisplay); this.application = new Application(this.PIXI); this.store = new Store(); this.modelIndex = this.store.getModelCurrentIndex(this.options.models); @@ -96,31 +99,27 @@ export class OhMyLive2D { } if (this.mobileHidden) { - this.statusBar.rest(); - return; } if (isLoading) { this.statusBar.showLoading(); } - await this.models.create().catch(() => { - this.statusBar.loadingError(() => { - void this.reloadModel(); - }); - }); - - this.application?.mount(this.stage.canvasElement!, this.stage.element!, this.models.model); - this.models.settingModel(); - this.stage.reloadStyle(this.models.modelSize); - - this.application?.resize(); - - this.statusBar.hideLoading(); - - // 注册模型事件 - this.registerModelEvent(); - await this.stage.slideIn(); + await this.models + .create() + .catch(() => { + this.statusBar.loadingError(() => void this.reloadModel()); + }) + .then(async () => { + this.application?.mount(this.stage.canvasElement!, this.stage.element!, this.models.model); + this.models.settingModel(); + this.stage.reloadStyle(this.models.modelSize); + this.application?.resize(); + this.statusBar.hideLoading(); + // 注册模型事件 + this.registerModelEvent(); + await this.stage.slideIn(); + }); } /** @@ -185,17 +184,17 @@ export class OhMyLive2D { } /** - * 切换状态. 休息/活动 + * 模型休息 */ - switchStatus(): void { - void this.stage.slideOut(); - this.tips.clear(); + // modelRest(): void { + // void this.stage.slideOut(); + // this.tips.clear(); - this.statusBar.rest(true, () => { - void this.stage.slideIn(); - void this.tips.idlePlayer?.start(); - }); - } + // this.statusBar.rest(true, () => { + // void this.stage.slideIn(); + // void this.tips.idlePlayer?.start(); + // }); + // } /** * 注册dom事件 @@ -223,14 +222,4 @@ export class OhMyLive2D { private registerModelEvent(): void { this.models.onHit(); } - - /** - * 主动提示消息 - * @param message 提示信息 - * @param duration 持续时间 默认值: 3000 - * @param priority 优先级 默认值: 3 - */ - tipsMessage(message: string, duration?: number, priority?: number): void { - this.tips.notification(message, duration, priority); - } } diff --git a/packages/oh-my-live2d/src/modules/stage.ts b/packages/oh-my-live2d/src/modules/stage.ts index c7de31b..e95b2ed 100644 --- a/packages/oh-my-live2d/src/modules/stage.ts +++ b/packages/oh-my-live2d/src/modules/stage.ts @@ -9,7 +9,7 @@ import { createElement, getWindowSizeType, handleCommonStyle, setStyleForElement export class Stage { element?: HTMLElement; canvasElement?: HTMLCanvasElement; - + status = false; private style: CSSProperties = {}; private canvasStyle: CSSProperties = {}; private slideChangeEnd?: (status: boolean) => void; @@ -103,7 +103,8 @@ export class Stage { return new Promise((resolve) => { setTimeout(() => { - this.slideChangeEnd?.(true); + this.status = true; + this.slideChangeEnd?.(this.status); resolve(); }, this.transitionTime); }); @@ -113,18 +114,23 @@ export class Stage { * 滑出 */ slideOut(): Promise { - this.setStyle({ - animationName: 'oml2d-stage-slide-out', - animationDuration: `${this.transitionTime}ms`, - animationFillMode: 'forwards' - }); - - return new Promise((resolve) => - setTimeout(() => { - this.slideChangeEnd?.(false); + return new Promise((resolve) => { + if (!this.status) { resolve(); - }, this.transitionTime) - ); + } else { + this.setStyle({ + animationName: 'oml2d-stage-slide-out', + animationDuration: `${this.transitionTime}ms`, + animationFillMode: 'forwards' + }); + + setTimeout(() => { + this.status = false; + this.slideChangeEnd?.(this.status); + resolve(); + }, this.transitionTime); + } + }); } /** diff --git a/packages/oh-my-live2d/src/modules/status-bar.ts b/packages/oh-my-live2d/src/modules/status-bar.ts index 7385215..f86c30f 100644 --- a/packages/oh-my-live2d/src/modules/status-bar.ts +++ b/packages/oh-my-live2d/src/modules/status-bar.ts @@ -1,15 +1,10 @@ -import { mergeDeep } from 'tianjie'; +import { isNumber, mergeDeep } from 'tianjie'; import { ELEMENT_ID } from '../config/index.js'; import { WindowSizeType } from '../constants/index.js'; import type { CSSProperties, DefaultOptions } from '../types/index.js'; import { createElement, getWindowSizeType, handleCommonStyle, setStyleForElement } from '../utils/index.js'; -const enum Status { - display = 1, - hidden = 0 -} - export const enum SystemState { info = 'info', error = 'error' @@ -26,20 +21,16 @@ export type HoverActionParams = { export class StatusBar { element?: HTMLElement; transitionTime = 800; - status: Status = Status.hidden; private style: CSSProperties = {}; private timer = 0; - constructor(private options: DefaultOptions) { - // this.options = options; - // this.element = createElement({ id: ELEMENT_ID.statusBar, tagName: 'div', innerText: 'hello' }); - // this.options.parentElement.append(this.element); - // this.initialize(); - } + private status = false; + constructor(private options: DefaultOptions) {} create(): void { - this.element = createElement({ id: ELEMENT_ID.statusBar, tagName: 'div', innerText: 'hello' }); + this.element = createElement({ id: ELEMENT_ID.statusBar, tagName: 'div', innerText: '' }); } + mount(): void { if (this.element) { this.options.parentElement.append(this.element); @@ -59,6 +50,7 @@ export class StatusBar { // 初始化样式 initializeStyle(): void { + this.setColor(this.options.primaryColor); this.reloadStyle(); } @@ -72,56 +64,54 @@ export class StatusBar { this.unMount(); this.mount(); } - // updateParentElement(): void { - // if (this.element) { - // this.element.remove(); - // this.options.parentElement.append(this.element); - // } - // } - // // 销毁 - // destroy(): void { - // this.element.remove(); - // } + /** + * 设置样式 + * @param style + */ setStyle(style: CSSProperties): void { if (this.element) { this.style = mergeDeep(this.style, style); - this.style.backgroundColor ||= this.stateColor.info; setStyleForElement(style, this.element); } } - private slideIn(): Promise { + private slideIn(): Promise { return new Promise((resolve) => { - this.status = Status.display; - this.setStyle({ - animationName: 'oml2d-status-bar-slide-in', - animationDuration: `${this.transitionTime}ms`, - animationFillMode: 'forwards' - }); - setTimeout(() => { - resolve(this.status); - }, this.transitionTime); + if (this.status) { + resolve(); + } + { + this.setStyle({ + animationName: 'oml2d-status-bar-slide-in', + animationDuration: `${this.transitionTime}ms`, + animationFillMode: 'forwards' + }); + setTimeout(() => { + this.status = true; + resolve(); + }, this.transitionTime); + } }); } - private slideOut(): Promise { + private slideOut(): Promise { return new Promise((resolve) => { - this.status = Status.hidden; - this.setStyle({ - animationName: 'oml2d-status-bar-slide-out', - animationDuration: `${this.transitionTime}ms`, - animationFillMode: 'forwards' - }); - setTimeout(() => { - if (this.element) { - // 每次收起后移除所有事件 - this.element.onclick = null; - this.element.onmousemove = null; - this.element.onmouseout = null; - } - resolve(this.status); - }, this.transitionTime); + if (!this.status) { + resolve(); + } else { + this.setStyle({ + animationName: 'oml2d-status-bar-slide-out', + animationDuration: `${this.transitionTime}ms`, + animationFillMode: 'forwards' + }); + setTimeout(() => { + this.status = true; + this.clearClickEvent(); + this.clearHoverEvent(); + resolve(); + }, this.transitionTime); + } }); } @@ -133,7 +123,6 @@ export class StatusBar { `, - SystemState.info, false ); } @@ -142,93 +131,110 @@ export class StatusBar { this.popup('加载成功'); } - setHoverAction(inContent: HoverActionParams, outContent: HoverActionParams): void { + // setHoverAction(inContent: HoverActionParams, outContent: HoverActionParams): void { + // if (this.element) { + // this.element.onmouseover = (): void => { + // this.popup(inContent.content, inContent.state, false); + // }; + // this.element.onmouseout = (): void => { + // this.popup(outContent.content, outContent.state, false); + // }; + // } + // } + + setHoverEvent(events?: { onIn?: () => void; onOut?: () => void }): void { + if (this.element) { + this.element.onmouseover = events?.onIn || null; + this.element.onmouseout = events?.onOut || null; + } + } + + setClickEvent(onClick: (() => void) | (() => Promise)): void { if (this.element) { - this.element.onmouseover = (): void => { - this.popup(inContent.content, inContent.state, false); - }; - this.element.onmouseout = (): void => { - this.popup(outContent.content, outContent.state, false); - }; + this.element.onclick = onClick; } } // 清除hover - clearHoverAction(): void { + clearHoverEvent(): void { if (this.element) { - this.element.onmousemove = null; + this.element.onmouseover = null; this.element.onmouseout = null; } } + // 清除点击事件 + clearClickEvent(): void { + if (this.element) { + this.element.onclick = null; + } + } + /** * 专门处理加载失败, 需要传入一个重新加载的方法 * @param reloadFn */ loadingError(reloadFn: () => void): void { - this.popup('加载失败', SystemState.error, false); - - // this.setStyle({}) - // 添加 mouseover 事件监听器 - // const mouseover = (): void => { - // this.popup('重新加载', SystemState.info, false); - // }; - - // const mouseout = (): void => { - // this.popup('加载失败', SystemState.error, false); - // }; - this.setHoverAction({ content: '重新加载', state: SystemState.info }, { content: '加载失败', state: SystemState.error }); - const handleClick = (): void => { - reloadFn(); - // this.element.removeEventListener('mouseout', mouseout); - // this.element.removeEventListener('mouseover', mouseover); - this.clearHoverAction(); - this.element?.removeEventListener('click', handleClick); - this.showLoading(); - }; + this.setHoverEvent({ + onIn: () => { + this.setContent('重新加载'); + }, + onOut: () => { + this.setContent('加载失败'); + } + }); - this.element?.addEventListener('click', handleClick); - // this.element.addEventListener('mouseover', mouseover); - // this.element.addEventListener('mouseout', mouseout); - } + // 设置点击事件 + this.setClickEvent(() => { + void reloadFn(); + }); - rest(isPermanent = false, callback?: () => void): void { - if (isPermanent) { - this.popup('看板娘休息中', SystemState.info, false, () => { - // this.popup('看板娘休息中', SystemState.info, 10); - void this.slideOut(); - callback?.(); - }); - } else { - this.popup('看板娘休息中', SystemState.info, 8000); - } + // 弹出状态提示 + this.popup('加载失败', false, this.options.statusBar.errorColor); } + // rest(isPermanent = false, callback?: () => void): void { + // if (isPermanent) { + // this.popup('看板娘休息中', SystemState.info, false, () => { + // void this.slideOut(); + // callback?.(); + // }); + // } else { + // this.popup('看板娘休息中', SystemState.info, 8000); + // } + // } + get stateColor(): { info: string; error: string } { return { info: this.options.primaryColor, error: this.options.statusBar.errorColor }; } + + setColor(color: string): void { + if (!color) { + return; + } + this.setStyle({ backgroundColor: color }); + } /** * 状态条弹出, 自动收起, delay为false时不收起 * @param message * @param state * @param delay */ - popup(message: string, state: SystemState = SystemState.info, delay: number | false = 1000, callback?: () => void): void { + popup(message?: string, delay: number | false = 0, color = this.options.primaryColor): void { clearTimeout(this.timer); - this.setContent(message); - this.setStyle({ backgroundColor: this.stateColor[state] }); + this.setColor(color); + if (message) { + this.setContent(message); + } + // this.setStyle({ backgroundColor: this.stateColor[state] }); void this.slideIn().then(() => { - if (delay) { + if (isNumber(delay)) { this.timer = setTimeout(() => { void this.slideOut(); }, delay); - } else { - if (callback && this.element) { - this.element.onclick = callback; - } } }); } diff --git a/packages/oh-my-live2d/src/types/common.ts b/packages/oh-my-live2d/src/types/common.ts index 9b6a42c..fcec322 100644 --- a/packages/oh-my-live2d/src/types/common.ts +++ b/packages/oh-my-live2d/src/types/common.ts @@ -1,4 +1,5 @@ -import { OhMyLive2D } from '../modules/oml2d.js'; +import type { LoadOhMyLive2D } from '../modules/load-oml2d.js'; +import type { OhMyLive2D } from '../modules/oml2d.js'; import type { CSSProperties, ImportType, LibraryUrls, PixiLive2dDisplayModule, PixiModule } from './index.js'; @@ -50,5 +51,7 @@ export type Item = { id: string; icon: string; title: string; - onClick?: (oml2d: OML2D) => void; + onClick?: ((oml2d: LoadOhMyLive2D) => void) | ((oml2d: LoadOhMyLive2D) => Promise); }; + +export type EventType = ((...arg) => void) | ((...arg) => Promise); diff --git a/tests/vite-app/src/main.ts b/tests/vite-app/src/main.ts index 2a2a630..2237a45 100644 --- a/tests/vite-app/src/main.ts +++ b/tests/vite-app/src/main.ts @@ -5,9 +5,9 @@ import './style.css'; import '//at.alicdn.com/t/c/font_2679099_hchompi0roq.js'; const foo = async () => { - loadOml2d({ + await loadOml2d({ // parentElement: el, - importType: 'complete', + // importType: 'complete', mobileDisplay: true, primaryColor: 'pink', models: [ @@ -48,6 +48,9 @@ const foo = async () => { } } }, + statusBar: { + style: {} + }, menus: { // items: [ // { @@ -78,7 +81,8 @@ const foo = async () => { // oml2d.loadNextModel(); // console.log('ssssssssssssss'); // }, 1000); - // loadOml2d({ + + // await loadOml2d({ // models: [ // { // path: 'https://registry.npmmirror.com/oml2d-models/latest/files/models/Senko_Normals/senko.model3.json', @@ -87,6 +91,7 @@ const foo = async () => { // } // ] // }); + // loadOml2d({ // models: [ // { diff --git a/tests/vue-app/src/App.vue b/tests/vue-app/src/App.vue index 590d658..7bed7d7 100644 --- a/tests/vue-app/src/App.vue +++ b/tests/vue-app/src/App.vue @@ -2,15 +2,17 @@ import { onMounted } from 'vue'; import HelloWorld from './components/HelloWorld.vue'; import { loadOml2d } from 'oh-my-live2d'; + onMounted(() => { + console.log('sssssssssssss'); loadOml2d({ primaryColor: 'pink', sayHello: true, models: [ - // { - // path: 'https://registry.npmmirror.com/oml2d-models/latest/files/models/Senko_Normals/senko.model3.json', - // position: [-10, 20] - // }, + { + path: 'https://registry.npmmirror.com/oml2d-models/latest/files/models/Senko_Normals/senko.model3.json', + position: [-10, 20] + }, { path: 'https://registry.npmmirror.com/oml2d-models/latest/files/models/Pio/model.json', scale: 0.4, diff --git a/tests/vue-app/vite.config.ts b/tests/vue-app/vite.config.ts index cc6dd57..19db1dd 100644 --- a/tests/vue-app/vite.config.ts +++ b/tests/vue-app/vite.config.ts @@ -4,30 +4,30 @@ import { oml2d } from 'vite-plugin-oh-my-live2d'; // https://vitejs.dev/config/ export default defineConfig({ plugins: [ - vue(), - oml2d({ - models: [ - { - path: 'https://registry.npmmirror.com/oml2d-models/latest/files/models/Senko_Normals/senko.model3.json', - position: [-10, 20] - }, - { - path: 'https://registry.npmmirror.com/oml2d-models/latest/files/models/Pio/model.json', - scale: 0.4, - position: [0, 50], - stageStyle: { - height: 300 - } - } - ], + vue() + // oml2d({ + // models: [ + // { + // path: 'https://registry.npmmirror.com/oml2d-models/latest/files/models/Senko_Normals/senko.model3.json', + // position: [-10, 20] + // }, + // { + // path: 'https://registry.npmmirror.com/oml2d-models/latest/files/models/Pio/model.json', + // scale: 0.4, + // position: [0, 50], + // stageStyle: { + // height: 300 + // } + // } + // ], - tips: { - idleTips: { - wordTheDay: (wordTheDayData) => { - return wordTheDayData.hitokoto; - } - } - } - }) + // tips: { + // idleTips: { + // wordTheDay: (wordTheDayData) => { + // return wordTheDayData.hitokoto; + // } + // } + // } + // }) ] });