[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 中使用: 具体使用方式可以查阅:

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

vitepress使用案例: tianjie.loclink.cn
vuepress使用案例: loclink.cn

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

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

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

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