guansss / pixi-live2d-display

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

How to make the model do the lipsync? #157

Open loydcose opened 4 months ago

loydcose commented 4 months ago

Is it possible for a model to do lipsync? I can't seem to find any lipsync contents on the documentation. Could you guys help me?

Here's my current code:

   const app = new Application({
        view: document.getElementById("canvas") as
          | HTMLCanvasElement
          | undefined,
        autoStart: true,
        resizeTo: window,
        backgroundAlpha: 0,
      })

      const model = await Live2DModel.from(sampleModel3, {
        autoInteract: false,
      })
      const scaleX = innerWidth / model.width
      const scaleY = innerHeight / model.height
      model.scale.set(Math.min(scaleX, scaleY))
      model.x = innerWidth / 2 - model.width / 2

      // can't access speak property, how do i lipsync the model?
      model.speak()

      app.stage.addChild(model)

Lib versions: pixi-live2d-display: 0.4.0 pixi.js: 6.5.2

Thanks a lot!

gaochunrong commented 2 months ago

https://github.com/Live2D/CubismWebMotionSyncComponents 直接下载集成到live2d web sdk就可以正常显示?具体细节说一下