Live2D使用分享

安装依赖
pnpm add  live2d-widget@latest --save
初始化以vue为示例

创建l2d.js(由于这个库是js写的所以ts不友好直接用js来写了)

import { L2Dwidget } from 'live2d-widget/lib/L2Dwidget.common.js'

L2Dwidget.init({
  tagMode: false,
  log: false,
  model: {
    jsonPath: 'http://1。xxx.xxx.xxx:8001/haru01.model.json'
  },
  display: { position: 'left', width: 250, height: 400 },
  mobile: { show: false }
})
更改模型

1.配置中的model为模型配置有现成的

 "model": {
            // jsonPath: "https://unpkg.com/live2d-widget-model-chitose@1.0.5/assets/chitose.model.json",
            // jsonPath: "https://unpkg.com/live2d-widget-model-haruto@1.0.5/assets/haruto.model.json",
            // jsonPath: "https://unpkg.com/live2d-widget-model-hibiki@1.0.5/assets/hibiki.model.json",
            // jsonPath: "https://unpkg.com/live2d-widget-model-hijiki@1.0.5/assets/hijiki.model.json",
            // jsonPath: "https://unpkg.com/live2d-widget-model-izumi@1.0.5/assets/izumi.model.json",
            // jsonPath: "https://unpkg.com/live2d-widget-model-koharu@1.0.5/assets/koharu.model.json",
            // jsonPath: "https://unpkg.com/live2d-widget-model-miku@1.0.5/assets/miku.model.json",
            // jsonPath: "https://unpkg.com/live2d-widget-model-ni-j@1.0.5/assets/ni-j.model.json",
            jsonPath: "https://unpkg.com/live2d-widget-model-shizuku@1.0.5/assets/shizuku.model.json",
            // jsonPath: "https://unpkg.com/live2d-widget-model-tororo@1.0.5/assets/tororo.model.json",
            // jsonPath: "https://unpkg.com/live2d-widget-model-tsumiki@1.0.5/assets/tsumiki.model.json",
            // jsonPath: "https://unpkg.com/live2d-widget-model-unitychan@1.0.5/assets/unitychan.model.json",
            // jsonPath: "https://unpkg.com/live2d-widget-model-z16@1.0.5/assets/z16.model.json",
            // jsonPath: "https://unpkg.com/live2d-widget-model-nico@1.0.5/assets/nico.model.json",
            // jsonPath: "https://unpkg.com/live2d-widget-model-nipsilon@1.0.5/assets/nipsilon.model.json",
            // jsonPath: "https://unpkg.com/live2d-widget-model-nito@1.0.5/assets/nito.model.json",
                        // jsonPath: "https://unpkg.com/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json",
        },

2.如果还不够用可以看看这个仓库

https://github.com/imuncle/live2d

https://github.com/summerscar/live2dDemo

3.如果你想使用自己的服务器，可以讲模型上传到自己的服务器然后用nginx代理

例如
在这里插入图片描述

配置nginx

server {
        listen       8001;
        server_name localhost;
        charset utf-8;
        add_header 'Access-Control-Allow-Origin' *;

        location / {
            root   /home/live2dw/assets;
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }

js中使用模型

L2Dwidget.init({
  tagMode: false,
  log: false,
  model: {
    jsonPath: 'http://x.xxx.xxx.xx:8001/haru01.model.json'
  },
  display: { position: 'left', width: 250, height: 400 },
  mobile: { show: false }
})
效果

在这里插入图片描述