guansss / pixi-live2d-display

A PixiJS plugin to display Live2D models of any kind.
https://guansss.github.io/pixi-live2d-display/
MIT License
870 stars 132 forks source link

How can i get it work ? #19

Closed rirh closed 3 years ago

rirh commented 3 years ago

package.json

{
 "dependencies": {
    "pixi-live2d-display": "^0.3.1",
    "pixi.js": "^5.3.7",
    "vue": "^3.0.0",
    "worker-plugin": "^5.0.0"
  }
}

main.ts


import "@/assets/js/live2d.min.js";
// import "@/assets/js/live2dcubismcore.min.js";
import * as PIXI from "pixi.js";
window.PIXI = PIXI;
const Live2DCubismCoreFile = require("@/assets/js/live2dcubismcore.min.js");
window.Live2DCubismCore = Live2DCubismCoreFile();
const { Live2DModel } = require("pixi-live2d-display");
 const app = new (window as any).PIXI.Application({
        view: document.getElementById("live2d-canvas-xiaomai"),
        autoStart: true,
        transparent: true,
        resize: false,
      });

      const model = await Live2DModel.from(
        "https://cdn.jsdelivr.net/gh/guansss/pixi-live2d-display/test/assets/haru/haru_greeter_t03.model3.json"
      );

      app.stage.addChild(model);

      // 变换
      model.x = 0;
      model.y = 0;
      model.rotation = Math.PI;
      model.skew.x = Math.PI;
      model.scale.set(2, 2);
      model.anchor.set(0.5, 0.5);

      // 交互
      model.on("hit", (hitAreas: any) => {
        if (hitAreas.includes("body")) {
          model.motion("tap_body");
        }
      });

I got live2dcubismcore.min.js from cubism official website. result : index.js:7534 Uncaught (in promise) Error: Failed to start up Cubism 4 framework. at startUpWithRetry (index.js:7534)

image How can i fix it? run https://github.com/guansss/live2d-viewer-web it has same problem image

guansss commented 3 years ago

Hi. The live2dcubismcore.min.js is not a module so it can't be imported, instead it should be referred by a <script> tag.

To run the live2d-viewer-web locally, you need to place live2dcubismcore.min.js in the public folder.

rirh commented 3 years ago

Thanks it's works!!! :)