feat: reimplement live2d story reader

package.json

@@ -41,8 +41,8 @@
     "mui-image": "^1.0.7",
     "notistack": "^2.0.8",
     "p-queue": "^8.0.1",
-    "pixi-live2d-display": "^0.4.0",
-    "pixi.js": "^6.5.10",
+    "pixi-live2d-display-mulmotion": "0.5.0-mm-3",
+    "pixi.js": "^7.4.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-gtm-module": "^2.0.11",

src/components/pixi/Live2dModel.tsx

@@ -1,12 +1,11 @@
 import { PixiComponent } from "@pixi/react";
-import { InternalModel, Live2DModel } from "pixi-live2d-display";
+import { InternalModel, Live2DModel } from "pixi-live2d-display-mulmotion";
 import {
   BatchRenderer,
   extensions,
   Extract,
-  InteractionManager,
-  Ticker,
   TickerPlugin,
+  Ticker,
 } from "pixi.js";
 import React, { forwardRef, useEffect, useState } from "react";
 
@@ -17,14 +16,9 @@ interface Live2dModelProps {
   scaleY?: number;
 }
 
-Live2DModel.registerTicker(Ticker);
-
-extensions.add(TickerPlugin, Extract, BatchRenderer, InteractionManager);
+extensions.add(TickerPlugin, Extract, BatchRenderer);
 
-const Component = PixiComponent<
-  Live2dModelProps & { model: Live2DModel<InternalModel> },
-  Live2DModel<InternalModel>
->("Live2dModel", {
+const Component = PixiComponent("Live2dModel", {
   create: (props) => {
     const { model } = props;
 
@@ -51,8 +45,11 @@ const Live2dModel = forwardRef<
       if (!modelData) {
         return;
       }
-      _model = await Live2DModel.from(modelData);
-      _model.autoInteract = false;
+      _model = await Live2DModel.from(modelData, {
+        autoFocus: false,
+        autoHitTest: false,
+        ticker: Ticker.shared,
+      });
       setModel(_model);
       if (props.onReady) {
         setTimeout(() => props.onReady!());

src/pages/App.tsx

@@ -118,6 +118,9 @@ const Settings = lazy(() => import("./Settings"));
 const MusicRecommend = lazy(() => import("./MusicRecommend"));
 const EventPointCalc = lazy(() => import("./EventPointCalc"));
 const StoryReader = lazy(() => import("./storyreader/StoryReader"));
+const StoryReaderLive2D = lazy(
+  () => import("./storyreader-live2d/StoryReaderLive2D")
+);
 const TitleMissionList = lazy(() => import("./mission/honor/TitleMissionList"));
 const NormalMissionList = lazy(
   () => import("./mission/normal/NormalMissionList")
@@ -562,7 +565,7 @@ const DrawerContent: React.FC<{
               to: "/storyreader",
             },
             {
-              disabled: true,
+              disabled: false,
               text: "Live2D",
               to: "/storyreader-live2d",
             },
@@ -1176,6 +1179,9 @@ const AppInner = observer((props: { theme: Theme }) => {
               <Route path="/storyreader">
                 <StoryReader />
               </Route>
+              <Route path="/storyreader-live2d">
+                <StoryReaderLive2D />
+              </Route>
               <Route path="/mission/title">
                 <TitleMissionList />
               </Route>

src/pages/live2d/Live2D.tsx

@@ -42,7 +42,7 @@ import ContainerContent from "../../components/styled/ContainerContent";
 import { Stage } from "@pixi/react";
 // import { settings } from "pixi.js";
 import Live2dModel from "../../components/pixi/Live2dModel";
-import { InternalModel, Live2DModel } from "pixi-live2d-display";
+import { InternalModel, Live2DModel } from "pixi-live2d-display-mulmotion";
 
 // settings.RESOLUTION = window.devicePixelRatio * 2;