[oh-my-live2d] 时隔一年我又捡起了这个项目

前言

就在一年前, 我花费了大量精力了解和学习vite4以及live2d相关知识, 并开发了我自己的第一个正儿八经的 web 开源项目: oh-my-live2d, 后来由于工作原因一直搁置着没有再去维护. 一直到前几天一个朋友加我微信说文档挂了, 我这才想起来这项目确实需要维护下了.

由于去年在做这个项目的时候我一心只想着堆功能, 所以代码层面没有考虑到维护性, 维护起来非常的费劲, 我就决定这几天将这个项目里里外外重构一遍, 与其说重构, 不如说是重写, 几乎所有模块全部重写了一遍, 目前已经重构结束, 发布到 npm 仓库了, 项目是干什么的, 我就不主要介绍了, 相信你点时开这个文档就已经一目了然了. 我主要说下怎么用, 哪些场景能用.

CDN 方式

index.html中使用下面这个脚本地址:

html 复制代码
<script src="https://cdn.jsdelivr.net/npm/oh-my-live2d/dist/index.min.js"></script>

通过 CDN 方式导入时,所有成员变量都可以在 OML2D 命名空间下被使用。

并且该方法接收一个 options 配置选项对象,示例如下:

html 复制代码
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>OhMyLive2D</title>
  </head>
  <body>
    <script src="https://cdn.jsdelivr.net/npm/oh-my-live2d/dist/index.min.js"></script>
    <script>
      OML2D.loadOml2d({
        models: [
          {
            path: "https://cdn.jsdelivr.net/gh/Eikanya/Live2d-model/Live2D/Senko_Normals/senko.model3.json",
            scale: 0.12,
            position: [-50, 50],
            stageStyle: {
              width: 320,
            },
          },
          {
            path: "https://cdn.jsdelivr.net/gh/Eikanya/Live2d-model/galgame%20live2d/Fox%20Hime%20Zero/mori_miko/mori_miko.model3.json",
            position: [50, 100],
            stageStyle: {
              width: 300,
              height: 450,
            },
          },
        ],
        tips: {
          style: {
            offsetY: 40,
          },
        },
      });
    </script>
  </body>
</html>

之后你就能看到这个效果:

包管理工具安装

sh 复制代码
npm install oh-my-live2d

ESM方式使用:

ts 复制代码
import { loadOml2d } from 'oh-my-live2d';
loadOml2d({
  models: [
    {
      path: 'https://cdn.jsdelivr.net/gh/Eikanya/Live2d-model/Live2D/Senko_Normals/senko.model3.json',
      scale: 0.12,
      position: [-50, 50],
      stageStyle: {
        width: 320
      }
    },
    {
      path: 'https://cdn.jsdelivr.net/gh/Eikanya/Live2d-model/galgame%20live2d/Fox%20Hime%20Zero/mori_miko/mori_miko.model3.json',
      position: [50, 100],
      stageStyle: {
        width: 300,
        height: 450
      }
    }
  ],
  tips: {
    style: {
      offsetY: 40
    }
  }
});

除此之外, 你还可以在vitepress中或者vuepress 中使用: 具体使用方式可以查阅:

使用效果可以参考以下站点:

项目目前处于积极维护状态, 正在寻找志同道合的朋友加入进来

仓库地址: github.com/oh-my-live2...

如果觉得好用可以点个star鼓励下, 感谢🙏

技术交流可以添加我的微信: coder7915 欢迎各位大佬随时骚扰.

相关推荐
zwjapple3 小时前
docker-compose一键部署全栈项目。springboot后端,react前端
前端·spring boot·docker
像风一样自由20206 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
aiprtem6 小时前
基于Flutter的web登录设计
前端·flutter
浪裡遊6 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
why技术6 小时前
Stack Overflow,轰然倒下!
前端·人工智能·后端
GISer_Jing7 小时前
0704-0706上海,又聚上了
前端·新浪微博
止观止7 小时前
深入探索 pnpm:高效磁盘利用与灵活的包管理解决方案
前端·pnpm·前端工程化·包管理器
whale fall7 小时前
npm install安装的node_modules是什么
前端·npm·node.js
会飞的鱼先生7 小时前
Node.js-http模块
网络协议·http·node.js
烛阴7 小时前
简单入门Python装饰器
前端·python