2020-08-23 20:54:31 +08:00
|
|
|
|
<h1 align="center">react-live2d</h1>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
2020-08-24 20:12:59 +08:00
|
|
|
|
[示例地址](http://test2.supmiao.com)
|
|
|
|
|
|
|
2020-08-26 14:26:44 +08:00
|
|
|
|
|
2020-08-26 14:21:05 +08:00
|
|
|
|
|
2020-08-30 11:33:21 +08:00
|
|
|
|
示例服务器配置较差，网站首次打开，看板娘需要加载较大的皮肤纹理高清图，请耐心等候
|
2020-08-23 20:54:31 +08:00
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
## 目录说明
|
|
|
|
|
|
|
2020-08-24 20:12:59 +08:00
|
|
|
|
```
|
|
|
|
|
|
·
|
|
|
|
|
|
├─ Core # Cubism Core 核心库
|
2020-08-23 20:54:31 +08:00
|
|
|
|
|
2020-08-24 20:12:59 +08:00
|
|
|
|
└─ Samples
|
2020-08-23 20:54:31 +08:00
|
|
|
|
|
|
|
|
|
|
└─ TypeScript
|
|
|
|
|
|
|
2020-08-24 20:12:59 +08:00
|
|
|
|
└─ Demo # 项目目录
|
2020-08-23 20:54:31 +08:00
|
|
|
|
|
2020-08-24 20:12:59 +08:00
|
|
|
|
└─ Resources # live2D的模型及动作导出的文件
|
2020-08-23 20:54:31 +08:00
|
|
|
|
|
2020-08-24 20:12:59 +08:00
|
|
|
|
└─ Framework # 包含渲染和动画功能等的源代码
|
2020-08-23 20:54:31 +08:00
|
|
|
|
|
|
|
|
|
|
└─ src # 核心代码
|
2020-08-24 20:12:59 +08:00
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
## 🖥 Environment Support
|
|
|
|
|
|
| | Windows | macOS | Linux | Android | iOS |
|
|
|
|
|
|
| ----- | :-----: | :-----: | :-----: | :-----: | :-----: |
|
|
|
|
|
|
| Google Chrome | ✔ | ✔ | ✔ | ✔ | ✔ |
|
|
|
|
|
|
| Firefox | ✔ | ✔ | ✔ | ✔ | ✔ |
|
|
|
|
|
|
| Safari | - | ✔ | - | - | ✔ |
|
|
|
|
|
|
| Microsoft Edge | ✔ | ✔ | - | ✔ | ✔ |
|
|
|
|
|
|
| Internet Explorer 11 | ✔ | - | - | - | - |
|
2020-08-23 20:54:31 +08:00
|
|
|
|
|
|
|
|
|
|
## 📦 Install
|
|
|
|
|
|
|
|
|
|
|
|
```bash
|
|
|
|
|
|
npm install react-live2d
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
|
2020-08-30 03:10:52 +08:00
|
|
|
|
## 🔨 Usage for SPA
|
|
|
|
|
|
##### 如：create-react-app
|
2020-08-23 20:54:31 +08:00
|
|
|
|
|
2020-08-30 11:12:37 +08:00
|
|
|
|
|
|
|
|
|
|
基础包直接使用script引入，在你个人的react项目的->public->index.html先插入，Core里可获得该min.js
|
|
|
|
|
|
```
|
|
|
|
|
|
<script src = "http://publicjs.supmiao.com/live2dcubismcore.min.js"></script>
|
|
|
|
|
|
```
|
|
|
|
|
|
|
2020-08-23 20:54:31 +08:00
|
|
|
|
```jsx
|
|
|
|
|
|
import ReactLive2d from 'react-live2d';
|
|
|
|
|
|
|
|
|
|
|
|
const App = () => (
|
|
|
|
|
|
<>
|
|
|
|
|
|
<ReactLive2d
|
|
|
|
|
|
width={300}
|
|
|
|
|
|
height={500}
|
|
|
|
|
|
/>
|
|
|
|
|
|
</>
|
|
|
|
|
|
);
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
比如你想要给页面加入模型Hiyori，那就在你的react项目中的public目录下，将Hiyori放入Resources资源文件夹,如
|
|
|
|
|
|
|
2020-08-24 20:12:59 +08:00
|
|
|
|
```
|
|
|
|
|
|
·
|
|
|
|
|
|
└─ public
|
2020-08-23 20:54:31 +08:00
|
|
|
|
|
|
|
|
|
|
└─ Resources
|
|
|
|
|
|
|
|
|
|
|
|
└─ Hiyori
|
2020-08-24 20:12:59 +08:00
|
|
|
|
```
|
2020-08-30 03:10:52 +08:00
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
## 🔨 Usage for SSR
|
|
|
|
|
|
##### 如：create-next-app
|
|
|
|
|
|
|
|
|
|
|
|
项目根目录创建components文件夹，并在其中创建Header.js
|
|
|
|
|
|
```jsx
|
|
|
|
|
|
import React from 'react'
|
|
|
|
|
|
import Head from 'next/head'
|
|
|
|
|
|
|
|
|
|
|
|
const Header = () => (
|
|
|
|
|
|
<div className="header">
|
|
|
|
|
|
<Head>
|
|
|
|
|
|
<title></title>
|
|
|
|
|
|
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
|
|
|
|
|
|
<script>
|
|
|
|
|
|
{
|
|
|
|
|
|
`
|
|
|
|
|
|
with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://publicjs.supmiao.com/live2dcubismcore.min.js'];
|
|
|
|
|
|
`
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
|
</Head>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
)
|
|
|
|
|
|
|
|
|
|
|
|
export default Header
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
```jsx
|
|
|
|
|
|
import dynamic from 'next/dynamic'
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const DynamicComponentWithNoSSR = dynamic(import('../components/Header'), {
|
|
|
|
|
|
ssr: false
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
const ReactLive2d = dynamic(import('react-live2d'), {
|
|
|
|
|
|
ssr: false
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
export default function Home() (
|
|
|
|
|
|
<>
|
|
|
|
|
|
<DynamicComponentWithNoSSR></DynamicComponentWithNoSSR>
|
|
|
|
|
|
<ReactLive2d
|
|
|
|
|
|
width = { 300}
|
|
|
|
|
|
height = { 500}
|
|
|
|
|
|
bottom = { '10px'}
|
|
|
|
|
|
right = { '10px'}
|
|
|
|
|
|
ModelList = { ['Haru']}
|
|
|
|
|
|
TouchBody = { ['啊啊啊啊啊你要干嘛', '哼', '坏人']}
|
|
|
|
|
|
PathFull='http://publicjs.supmiao.com/Resources/'
|
|
|
|
|
|
/>
|
|
|
|
|
|
</>
|
|
|
|
|
|
);
|
|
|
|
|
|
```
|
|
|
|
|
|
|
2020-08-30 11:12:37 +08:00
|
|
|
|
SSR使用看板娘需要允许跨域的资源域名，nginx参考配置如下：
|
2020-08-30 03:10:52 +08:00
|
|
|
|
```
|
2020-08-30 11:07:48 +08:00
|
|
|
|
server {
|
|
|
|
|
|
....
|
|
|
|
|
|
add_header Access-Control-Allow-Origin *;
|
|
|
|
|
|
add_header Access-Control-Allow-Methods 'GET,POST';
|
|
|
|
|
|
add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';
|
|
|
|
|
|
}
|
2020-08-30 03:10:52 +08:00
|
|
|
|
```
|
|
|
|
|
|
|
2020-09-01 18:35:37 +08:00
|
|
|
|
## 🌍 More Model
|
|
|
|
|
|
最新的SDK是支持moc3格式的模型，并且官方以后保证了新版本也向前兼容（除了2以前的）。
|
|
|
|
|
|
所以使用的大大们记得使用时去寻找moc3模型^ ^
|
|
|
|
|
|
如何辨别是moc3格式模型：
|
|
|
|
|
|
|
|
|
|
|
|
|
2020-09-02 17:45:22 +08:00
|
|
|
|
个人用以收集、学习的moc3格式[仓库](https://github.com/chendishen/live2d-model)
|
2020-08-30 03:10:52 +08:00
|
|
|
|
|
2020-09-02 17:45:22 +08:00
|
|
|
|
更多模型，请动手在github搜索'live2d 模型'即可，模型注意版权，请勿用于商业用途~
|
2020-08-23 20:54:31 +08:00
|
|
|
|
|
|
|
|
|
|
api 文档 （待完善，如有需要功能欢迎提[issue](https://github.com/chendishen/Live2DBase/issues)）
|
|
|
|
|
|
|
|
|
|
|
|
| 成员 | 说明 | 类型 | 默认值 |
|
2020-08-24 20:12:59 +08:00
|
|
|
|
| :-----: | ----- | ----- | ----- |
|
2020-08-23 20:54:31 +08:00
|
|
|
|
| width | 盒子宽度 | Number | 300 |
|
2020-08-24 20:34:26 +08:00
|
|
|
|
| height | 盒子高度 | Number | 500 |
|
2020-08-23 20:54:31 +08:00
|
|
|
|
| top | position：relative的top值 | String | '' |
|
|
|
|
|
|
| right | position：relative的right值 | String | '0' |
|
|
|
|
|
|
| bottom | position：relative的bottom值 | String | '0' |
|
|
|
|
|
|
| left | position：relative的left值 | String | '' |
|
2020-09-07 13:42:39 +08:00
|
|
|
|
| ModelList | 模型列表 | Array<String> | ['Hiyori'] |
|
2020-09-09 09:45:31 +08:00
|
|
|
|
| TouchBody | 点击身体时聊天框随机出现数组的值,该值当模型未存入身体触摸事件时无效 | Array<String> | ['啊呀，你的手在摸哪里嘛~','哼，坏人'] |
|
|
|
|
|
|
| TouchHead | 点击头部时聊天框随机出现数组的值,该值当模型未存入头部触摸事件时无效 | Array<String> | ['讨厌,不要掐人家的脸嘛~','希望明天也能感受到你的触摸呢'] |
|
2020-09-09 17:40:32 +08:00
|
|
|
|
| TouchDefault | 点击盒子任意位置时聊天框随机出现数组的值,该值所有模型均有效且优先级最低 | Array<String> | ['今天又是开心的一天呢~','真是元气满满呀'] |
|
2020-08-24 20:12:59 +08:00
|
|
|
|
| color | 聊天框背景颜色 | String | '#C8E6FE' |
|
2020-10-30 09:59:12 +08:00
|
|
|
|
| PathFull | 当SSR框架时，必须传入此参数，用以额外指定绝对路径资源域名地址；当SPA框架时，目录较深的页面也可以根据自己需要，设置该参数指向正确的路径，如'../Resources/' | String | '' |
|
2020-09-02 18:22:39 +08:00
|
|
|
|
| MobileShow | 是否在移动设备展示看板娘 | Boolean | false |
|
2020-09-07 13:42:39 +08:00
|
|
|
|
| menuList | 启用的功能菜单列表，该值传空数组时不启用菜单，可用参数为：Mtab | Array<String> | ['Mtab'] |
|
2020-08-23 20:54:31 +08:00
|
|
|
|
|
|
|
|
|
|
|
2020-09-07 13:42:39 +08:00
|
|
|
|
当menuList 传入非空数组时，其中的字段：
|
|
|
|
|
|
| 成员 | 说明 | 类型 | 默认值 |
|
|
|
|
|
|
| :-----: | ----- | ----- | ----- |
|
|
|
|
|
|
| Mtab | 切换看板娘 | String | 'Mtab' |
|
