OhMyLive2D 是一个应用于浏览器环境且开箱即用的Live2D组件, 它支持所有版本的Live2D模型, 使用方式足够简单并且高可自定义, 可以快速为您的个人网站添加Live2D看板娘, 使您的个人网站变得更具有特色.
通过 查阅文档 以了解更多详细使用教程。
Tip
项目目前正处于积极维护状态, 欢迎志同道合的伙伴加入😄
- 支持 WebGL 和 ES6 的浏览器
-
支持
CDN
或ES6 Module
两种导入方式。 -
默认自动集成
Cubism 2 SDK
和Cubism 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>
之后您可以查阅文档了解更多相关内容:查阅文档
以下是一些非常优质的使用案例:
- https://hacxy.cn
- https://sugarat.top
- https://theme.sugarat.top
- https://asev.gitee.io
- https://docs.kisssssssss.space/setting/live2d
征集更多案例, 欢迎您的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
非常感谢以下为本项目赞助过的所有人:
Tip
感谢您使用 oh-my-live2d
, 创作不易, 您的 star 是我更新的动力.
本仓库所有模型文件均来源于网络, 仅供参考和学习, 严禁用于任何商业盈利项目, 所有以盈利为目的而使用本仓库的模型资源的行为均与仓库创建者无关, 仓库中每个模型的所有权均属于这个模型的作者或创作团队, 若侵权请联系: hacxy.97@outlook.com 及时删除