Skip to content

应用于浏览器环境且开箱即用的Live2D组件, 它支持所有版本的Live2D模型, 使用方式足够简单并且高可自定义, 可以快速为您的个人网站添加Live2D看板娘, 使您的个人网站变得更具有特色.

License

Notifications You must be signed in to change notification settings

oh-my-live2d/oh-my-live2d

Repository files navigation

OhMyLive2D

高可自定义的Live2D For Web组件

npm GitHub package.json version

OhMyLive2D 是一个应用于浏览器环境且开箱即用的Live2D组件, 它支持所有版本的Live2D模型, 使用方式足够简单并且高可自定义, 可以快速为您的个人网站添加Live2D看板娘, 使您的个人网站变得更具有特色.

通过 查阅文档 以了解更多详细使用教程。

Tip

项目目前正处于积极维护状态, 欢迎志同道合的伙伴加入😄

先决条件

  • 支持 WebGLES6 的浏览器

特点

  • 支持 CDNES6 Module 两种导入方式。

  • 默认自动集成 Cubism 2 SDKCubism 5 SDK,您无需手动额外引入其他外部依赖。

  • 可自定义多个本地或远程 Live2D Model, 通过菜单按顺序切换模型。

  • 使用 TypeScript 开发,通过完整的类型推导享受它为您带来的语法补全。

  • 高可自定义, 完全可自定义的模块.

  • 多种支持方案

快速体验

您可以通过stackblitz在线体验

或者在您本地的任意项目中使用CDN导入方式来体验:

<script src="https://unpkg.com/oh-my-live2d@latest"></script>
<script>
  OML2D.loadOml2d({
    models: [
      {
        path: 'https://model.oml2d.com/HK416-1-normal/model.json',
        position: [0, 60],
        scale: 0.08,
        stageStyle: {
          height: 450
        }
      }
    ]
  });
</script>

之后您可以查阅文档了解更多相关内容:查阅文档

更多支持

案例

以下是一些非常优质的使用案例:

征集更多案例, 欢迎您的PR😋

如何贡献代码

本项目管理方式采用 monorepo 结构, 开始参与维护前需要您全局安装 pnpm, 并提前了解 Angular Git提交规范.

  • 首先 fork 本仓库并将项目 clone 至本地

  • cd 到项目目录之后安装依赖:

    pnpm install
  • 运行开发环境

    pnpm dev
  • 运行测试

    pnpm test
  • 运行文档

    pnpm docs:dev

核心代码存放于: packages/oh-my-live2d 中, 所有模块以命名区分分别存放于 src/modules 文件夹下

需要注意的是所有本地文件的导入语句需要以 .js 结尾, 否则会产生类型推导异常

文档中所有配置选项的描述无需您手动编辑, 它将根据 packages/oh-my-live2d/src/types 中导出的类型模块自动生成, 注释即文档

修改完代码后您只需按照 Angular 提交规范, 提交代码至您fork之后的仓库即可, 然后向本仓库提交PR

贡献者们

感谢以下所有为 oh-my-live2d 贡献过代码的 开发者们

赞赏

打赏时如果备注了 Github 用户名称以及项目名称, 之后将会出现在鸣谢列表中, 备注格式: 打赏的项目名称: 你的用户名称.
备注示例: oml2d: hacxy

鸣谢

非常感谢以下为本项目赞助过的所有人:

讨论

  • 微信群:

  • QQ群: 474032914

Tip

感谢您使用 oh-my-live2d, 创作不易, 您的 star 是我更新的动力.

Project Status

Alt

开源许可

免责声明

本仓库所有模型文件均来源于网络, 仅供参考和学习, 严禁用于任何商业盈利项目, 所有以盈利为目的而使用本仓库的模型资源的行为均与仓库创建者无关, 仓库中每个模型的所有权均属于这个模型的作者或创作团队, 若侵权请联系: hacxy.97@outlook.com 及时删除

About

应用于浏览器环境且开箱即用的Live2D组件, 它支持所有版本的Live2D模型, 使用方式足够简单并且高可自定义, 可以快速为您的个人网站添加Live2D看板娘, 使您的个人网站变得更具有特色.

Topics

Resources

License

Stars

Watchers

Forks

Languages