react-live2d
[示例地址](http://test2.supmiao.com)
示例服务器配置较差，网站首次打开，看板娘需要加载较大的皮肤纹理高清图，请耐心等候
## 目录说明
```
·
├─ Core # Cubism Core 核心库
└─ Samples
└─ TypeScript
└─ Demo # 项目目录
└─ Resources # live2D的模型及动作导出的文件
└─ Framework # 包含渲染和动画功能等的源代码
└─ src # 核心代码
```
## 🖥 Environment Support
| | Windows | macOS | Linux | Android | iOS |
| ----- | :-----: | :-----: | :-----: | :-----: | :-----: |
| Google Chrome | ✔ | ✔ | ✔ | ✔ | ✔ |
| Firefox | ✔ | ✔ | ✔ | ✔ | ✔ |
| Safari | - | ✔ | - | - | ✔ |
| Microsoft Edge | ✔ | ✔ | - | ✔ | ✔ |
| Internet Explorer 11 | ✔ | - | - | - | - |
## 📦 Install
```bash
npm install react-live2d
```
## 🔨 Usage for SPA
##### 如：create-react-app
基础包直接使用script引入，在你个人的react项目的->public->index.html先插入，Core里可获得该min.js
```
```
```jsx
import ReactLive2d from 'react-live2d';
const App = () => (
<>
);
```
比如你想要给页面加入模型Hiyori，那就在你的react项目中的public目录下，将Hiyori放入Resources资源文件夹,如
```
·
└─ public
└─ Resources
└─ Hiyori
```
## 🔨 Usage for SSR
##### 如：create-next-app
创建文件`./pages/_document.js`
```jsx
import Document, { Html, Head, Main, NextScript } from 'next/document'
class MyDocument extends Document {
static async getInitialProps(ctx) {
const initialProps = await Document.getInitialProps(ctx)
return { ...initialProps }
}
render() {
return (
{/*