【亲测免费】 OhMyLive2D 开源项目使用教程

1. 项目介绍

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

主要特点

• 支持所有版本的 Live2D 模型：无论是 Cubism 2 SDK 还是 Cubism 5 SDK，OhMyLive2D 都能完美支持。
• 简单易用：提供 CDN 或 ES6 Module 两种导入方式，方便快速集成。
• 高度自定义：完全可自定义的模块，支持多种配置选项。
• TypeScript 开发：通过完整的类型推导，享受语法补全带来的便利。

2. 项目快速启动

2.1 通过 CDN 快速集成

您可以通过以下代码快速在您的项目中集成 OhMyLive2D：

<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>

2.2 通过 ES6 Module 导入

如果您使用的是现代 JavaScript 项目，可以通过 ES6 Module 方式导入 OhMyLive2D：

import { loadOml2d } from 'oh-my-live2d';

loadOml2d([
  {
    models: [
      {
        path: 'https://model.oml2d.com/HK416-1-normal/model.json',
        position: [0, 60],
        scale: 0.08,
        stageStyle: { height: 450 }
      }
    ]
  }
]);

3. 应用案例和最佳实践

3.1 在 VitePress 中使用

OhMyLive2D 可以轻松集成到 VitePress 项目中。以下是一个简单的示例：

// .vitepress/config.js
import { loadOml2d } from 'oh-my-live2d';

export default {
  // 其他配置项
  mounted() {
    loadOml2d([
      {
        models: [
          {
            path: 'https://model.oml2d.com/HK416-1-normal/model.json',
            position: [0, 60],
            scale: 0.08,
            stageStyle: { height: 450 }
          }
        ]
      }
    ]);
  }
};

3.2 在 VuePress2 中使用

在 VuePress2 中使用 OhMyLive2D 也非常简单：

// .vuepress/config.js
import { loadOml2d } from 'oh-my-live2d';

export default {
  // 其他配置项
  mounted() {
    loadOml2d([
      {
        models: [
          {
            path: 'https://model.oml2d.com/HK416-1-normal/model.json',
            position: [0, 60],
            scale: 0.08,
            stageStyle: { height: 450 }
          }
        ]
      }
    ]);
  }
};

4. 典型生态项目

4.1 live2d-models

live2d-models 是一个为 OhMyLive2D 提供的高质量模型仓库。您可以从中获取各种精美的 Live2D 模型，用于您的项目中。

4.2 VitePlugin

OhMyLive2D 还提供了 VitePlugin，方便您在 Vite 项目中快速集成 Live2D 组件。

4.3 Hexo 插件

如果您使用的是 Hexo 静态网站生成器，OhMyLive2D 也提供了相应的插件，方便您在 Hexo 项目中集成 Live2D 看板娘。

通过以上教程，您可以快速上手并集成 OhMyLive2D 到您的项目中，为您的网站增添独特的视觉效果。