原文链接: 在ts项目中接入live2d-widget.js , 在网页中展示二次元老婆

上一篇: tailwindcss 简单场景和官方案例

下一篇: git Submodule 将别人的模型文件通过子模块下载到自己的项目中

效果, 有很多自定义效果, 文字动作啥的, 基于pix, 还是比较细腻的, 一个模型2m多, 应该可以接受

这个也是有语音的...

模型下载

https://github.com/xiazeyu/live2d-widget-models

https://github.com/raoenhui/live2d-example

更多设置:

https://blog.csdn.net/Blog_ShaoHuaiLin/article/details/105818795

https://raoenhui.github.io/js/2019/12/26/live2d/

下载js, 两个文件都要下载, 添加声明模块

https://github.com/xiazeyu/live2d-widget.js-doc/tree/4b846958efe54c9ff2ae6cdf94b531732c4c04d7/lib

interface Window {L2Dwidget: any
}declare const windos: Window & typeof globalThis
declare module "L2Dwidget"

注入并设置, 这个库还是用注入的方便, 打包不知道会有什么坑...

//  其他可选的模型：
//  小帅哥： https://unpkg.com/live2d-widget-model-chitose@1.0.5/assets/chitose.model.json
//  萌娘：https://unpkg.com/live2d-widget-model-shizuku@1.0.5/assets/shizuku.model.json
//  小可爱（女）：https://unpkg.com/live2d-widget-model-koharu@1.0.5/assets/koharu.model.json
//  小可爱（男）：https://unpkg.com/live2d-widget-model-haruto@1.0.5/assets/haruto.model.json
//  初音：https://unpkg.com/live2d-widget-model-miku@1.0.5/assets/miku.model.json
import { injectScript } from "./utils"injectScript("/lib/L2Dwidget.min.js").then(() => {console.log("window.L2Dwidget", window.L2Dwidget)window.L2Dwidget.on("*", (name: string) => {console.log("%c EVENT " + "%c -> " + name,"background: #222; color: yellow","background: #fff; color: #000",)}).init({model: {jsonPath:// "https://unpkg.com/live2d-widget-model-miku@1.0.5/assets/miku.model.json",// "/lib/live2d-widget-model-miku/assets/miku.model.json","/lib/live2d-widget-model-shizuku/assets/shizuku.model.json",scale: 1,hHeadPos: 0.5,vHeadPos: 0.618,},dialog: {// 开启对话框enable: true,script: {// 每空闲 10 秒钟，显示一条一言"every idle 10s": "$hitokoto$",// 当触摸到星星图案"hover .star": "星星在天上而你在我心里 (*/ω＼*)",// 当触摸到角色身体"tap body": "哎呀！别碰我！",// 当触摸到角色头部"tap face": "人家已经不是小孩子了！",},},})
})