amass/react-live2d
1
0
Fork 0
mirror of https://github.com/chendishen/react-live2d.git synced 2024-11-26 14:17:02 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

添加了SSR框架时看板娘的引入方式（NEXT）

Browse Source
This commit is contained in:
chendishen 2020-08-30 03:10:52 +08:00
parent 467a65ca59
commit 2c514eb07a
14 changed files with 112 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
README.md
View File

@ -52,7 +52,8 @@ npm install react-live2d
``` ```
## 🔨 Usage ## 🔨 Usage for SPA
##### 如：create-react-app
```jsx ```jsx
import ReactLive2d from 'react-live2d'; import ReactLive2d from 'react-live2d';
@ -77,6 +78,74 @@ const App = () => (
└─ Hiyori └─ Hiyori
``` ```
## 🔨 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/'
/>
</>
);
```
SSR使用看板娘需要资源域名，资源域名需要允许跨域，nginx参考配置如下：
```
location / {
add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Headers X-Requested-With;
add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
}
```
更多模型，请动手在github搜索'live2d 模型'即可，模型大多有版权，请慎勿用于商业~ 更多模型，请动手在github搜索'live2d 模型'即可，模型大多有版权，请慎勿用于商业~
api 文档 （待完善，如有需要功能欢迎提[issue](https://github.com/chendishen/Live2DBase/issues)） api 文档 （待完善，如有需要功能欢迎提[issue](https://github.com/chendishen/Live2DBase/issues)）
@ -93,5 +162,6 @@ api 文档 （待完善，如有需要功能欢迎提[issue](https://github.com/
| TouchBody | 点击身体时聊天框随机出现数组的值 | Array<String> | ['啊呀，你的手在摸哪里嘛~','哼，坏人'] | | TouchBody | 点击身体时聊天框随机出现数组的值 | Array<String> | ['啊呀，你的手在摸哪里嘛~','哼，坏人'] |
| TouchHead | 点击头部时聊天框随机出现数组的值,该值当模型未存入头部事件时无效 | Array<String> | ['讨厌,不要掐人家的脸嘛~','希望明天也能感受到你的触摸呢'] | | TouchHead | 点击头部时聊天框随机出现数组的值,该值当模型未存入头部事件时无效 | Array<String> | ['讨厌,不要掐人家的脸嘛~','希望明天也能感受到你的触摸呢'] |
| color | 聊天框背景颜色 | String | '#C8E6FE' | | color | 聊天框背景颜色 | String | '#C8E6FE' |
| PathFull | 当SSR框架时，必须传入此参数，用以额外指定绝对路径资源域名地址 | String | '' |

2
Samples/TypeScript/Demo/.npmignore
View File

@ -4,3 +4,5 @@ example
.babelrc .babelrc
.gitignore .gitignore
webpack.config.js webpack.config.js
/Framework
/Resources

4
Samples/TypeScript/Demo/dist/bundle.js vendored
View File

File diff suppressed because one or more lines are too long

3
Samples/TypeScript/Demo/dist/index.js vendored
View File

@ -45,7 +45,7 @@ function ReactLive2d(props) {
var printStyle = _defineProperty({ var printStyle = _defineProperty({
position: 'absolute', position: 'absolute',
width: props.width > 300 ? props.width / 2 : '150px', width: props.width > 300 ? props.width / 2 : '150px',
left: props.width > 300 ? (props.width - props.width / 2) / 2 : (props.width - 150) / 2, left: props.width > 300 ? (props.width - props.width / 2) / 2 + 'px' : (props.width - 150) / 2 + 'px',
top: '0', top: '0',
minHeight: '20px', minHeight: '20px',
display: 'block', display: 'block',
@ -60,6 +60,7 @@ function ReactLive2d(props) {
props.ModelList ? LAppDefine.lappdefineSet.setModelDir(props.ModelList) : LAppDefine.lappdefineSet.setModelDir([]); props.ModelList ? LAppDefine.lappdefineSet.setModelDir(props.ModelList) : LAppDefine.lappdefineSet.setModelDir([]);
props.TouchBody ? LAppDefine.lappdefineSet.setHitBody(props.TouchBody) : LAppDefine.lappdefineSet.setHitBody([]); props.TouchBody ? LAppDefine.lappdefineSet.setHitBody(props.TouchBody) : LAppDefine.lappdefineSet.setHitBody([]);
props.TouchHead ? LAppDefine.lappdefineSet.setHitHead(props.TouchHead) : LAppDefine.lappdefineSet.setHitHead([]); props.TouchHead ? LAppDefine.lappdefineSet.setHitHead(props.TouchHead) : LAppDefine.lappdefineSet.setHitHead([]);
props.PathFull ? LAppDefine.lappdefineSet.setPathFull(props.PathFull) : LAppDefine.lappdefineSet.setPathFull('');
if (_lappdelegate.LAppDelegate.getInstance().initialize() == false) { if (_lappdelegate.LAppDelegate.getInstance().initialize() == false) {
return; return;

11
Samples/TypeScript/Demo/dist/lappdefine.ts vendored
View File

@ -23,7 +23,9 @@ export const ViewLogicalMaxBottom = -2.0;
export const ViewLogicalMaxTop = 2.0; export const ViewLogicalMaxTop = 2.0;
// 相対パス // 相対パス
export const ResourcesPath = './Resources/'; export let ResourcesPath = './Resources/';
// 绝对路径，提供给SSR类型项目
// export let ResourcesPathFull = '';
// モデルの後ろにある背景の画像ファイル // モデルの後ろにある背景の画像ファイル
export const BackImageName = 'back_class_normal.png'; export const BackImageName = 'back_class_normal.png';
@ -72,13 +74,20 @@ export const RenderTargetHeight = 1000;
// 外部传入动态参数 // 外部传入动态参数
export class lappdefineSet { export class lappdefineSet {
// 模型列表
public static setModelDir(modelDir:Array<string>): void { public static setModelDir(modelDir:Array<string>): void {
ModelDir = modelDir.length>0 ? modelDir : ModelDir ModelDir = modelDir.length>0 ? modelDir : ModelDir
} }
// 身体点击语言
public static setHitBody(hitBodyList:Array<string>): void { public static setHitBody(hitBodyList:Array<string>): void {
HitBodyList = hitBodyList.length>0 ? hitBodyList : HitBodyList HitBodyList = hitBodyList.length>0 ? hitBodyList : HitBodyList
} }
// 头部点击语言
public static setHitHead(hitHeadList:Array<string>): void { public static setHitHead(hitHeadList:Array<string>): void {
HitHeadList = hitHeadList.length>0 ? hitHeadList : HitHeadList HitHeadList = hitHeadList.length>0 ? hitHeadList : HitHeadList
} }
// 模型绝对路径
public static setPathFull(pathfull:string): void {
ResourcesPath = pathfull.length>0 ? pathfull : ResourcesPath
}
} }

2
Samples/TypeScript/Demo/dist/lapplive2dmanager.ts vendored
View File

@ -197,6 +197,8 @@ export class LAppLive2DManager {
// ModelDir[]に保持したディレクトリ名から // ModelDir[]に保持したディレクトリ名から
// model3.jsonのパスを決定する。 // model3.jsonのパスを決定する。
// ディレクトリ名とmodel3.jsonの名前を一致させておくこと。 // ディレクトリ名とmodel3.jsonの名前を一致させておくこと。
// SSR服务端渲染的时候，无法正确读取资源。考虑把一个基础模型录入npm包
const model: string = LAppDefine.ModelDir[index]; const model: string = LAppDefine.ModelDir[index];
const modelPath: string = LAppDefine.ResourcesPath + model + '/'; const modelPath: string = LAppDefine.ResourcesPath + model + '/';
let modelJsonName: string = LAppDefine.ModelDir[index]; let modelJsonName: string = LAppDefine.ModelDir[index];

2
Samples/TypeScript/Demo/dist/lappmodel.ts vendored
View File

@ -403,12 +403,14 @@ export class LAppModel extends CubismUserModel {
} }
// WebGLのテクスチャユニットにテクスチャをロードする // WebGLのテクスチャユニットにテクスチャをロードする
// 在WebGL的纹理单元中加载纹理
let texturePath = this._modelSetting.getTextureFileName( let texturePath = this._modelSetting.getTextureFileName(
modelTextureNumber modelTextureNumber
); );
texturePath = this._modelHomeDir + texturePath; texturePath = this._modelHomeDir + texturePath;
// ロード完了時に呼び出すコールバック関数 // ロード完了時に呼び出すコールバック関数
// 加载完成时调用的回调函数
const onLoad = (textureInfo: TextureInfo): void => { const onLoad = (textureInfo: TextureInfo): void => {
this.getRenderer().bindTexture(modelTextureNumber, textureInfo.id); this.getRenderer().bindTexture(modelTextureNumber, textureInfo.id);

1
Samples/TypeScript/Demo/example/src/App.js
View File

@ -13,6 +13,7 @@ import ReactLive2d from '../../src/index.js';
right={'10px'} right={'10px'}
ModelList={['Haru']} ModelList={['Haru']}
TouchBody={['啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊你要干嘛','哼','坏人']} TouchBody={['啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊你要干嘛','哼','坏人']}
PathFull='http://test2.supmiao.com/Resources/'
/> />
</div> </div>
) )

2
Samples/TypeScript/Demo/package.json
View File

@ -13,7 +13,7 @@
}, },
"main": "dist/bundle.js", "main": "dist/bundle.js",
"name": "react-live2d", "name": "react-live2d",
"version": "1.0.12", "version": "1.0.15",
"description": "live2D 看板娘", "description": "live2D 看板娘",
"author": { "author": {
"name": "DS", "name": "DS",

3
Samples/TypeScript/Demo/src/index.js
View File

@ -29,7 +29,7 @@ function ReactLive2d(props) {
let printStyle = { let printStyle = {
position: 'absolute', position: 'absolute',
width: props.width > 300 ? props.width/2 : '150px', width: props.width > 300 ? props.width/2 : '150px',
left: props.width > 300 ? (props.width - props.width/2)/2 : (props.width-150)/2, left: props.width > 300 ? (props.width - props.width/2)/2 + 'px' : (props.width-150)/2 + 'px',
top: '0', top: '0',
minHeight: '20px', minHeight: '20px',
display: 'block', display: 'block',
@ -46,6 +46,7 @@ function ReactLive2d(props) {
props.ModelList ? LAppDefine.lappdefineSet.setModelDir(props.ModelList) : LAppDefine.lappdefineSet.setModelDir([]) props.ModelList ? LAppDefine.lappdefineSet.setModelDir(props.ModelList) : LAppDefine.lappdefineSet.setModelDir([])
props.TouchBody ? LAppDefine.lappdefineSet.setHitBody(props.TouchBody) : LAppDefine.lappdefineSet.setHitBody([]) props.TouchBody ? LAppDefine.lappdefineSet.setHitBody(props.TouchBody) : LAppDefine.lappdefineSet.setHitBody([])
props.TouchHead ? LAppDefine.lappdefineSet.setHitHead(props.TouchHead) : LAppDefine.lappdefineSet.setHitHead([]) props.TouchHead ? LAppDefine.lappdefineSet.setHitHead(props.TouchHead) : LAppDefine.lappdefineSet.setHitHead([])
props.PathFull ? LAppDefine.lappdefineSet.setPathFull(props.PathFull) : LAppDefine.lappdefineSet.setPathFull('')
if (LAppDelegate.getInstance().initialize() == false) { if (LAppDelegate.getInstance().initialize() == false) {

11
Samples/TypeScript/Demo/src/lappdefine.ts
View File

@ -23,7 +23,9 @@ export const ViewLogicalMaxBottom = -2.0;
export const ViewLogicalMaxTop = 2.0; export const ViewLogicalMaxTop = 2.0;
// 相対パス // 相対パス
export const ResourcesPath = './Resources/'; export let ResourcesPath = './Resources/';
// 绝对路径，提供给SSR类型项目
// export let ResourcesPathFull = '';
// モデルの後ろにある背景の画像ファイル // モデルの後ろにある背景の画像ファイル
export const BackImageName = 'back_class_normal.png'; export const BackImageName = 'back_class_normal.png';
@ -72,13 +74,20 @@ export const RenderTargetHeight = 1000;
// 外部传入动态参数 // 外部传入动态参数
export class lappdefineSet { export class lappdefineSet {
// 模型列表
public static setModelDir(modelDir:Array<string>): void { public static setModelDir(modelDir:Array<string>): void {
ModelDir = modelDir.length>0 ? modelDir : ModelDir ModelDir = modelDir.length>0 ? modelDir : ModelDir
} }
// 身体点击语言
public static setHitBody(hitBodyList:Array<string>): void { public static setHitBody(hitBodyList:Array<string>): void {
HitBodyList = hitBodyList.length>0 ? hitBodyList : HitBodyList HitBodyList = hitBodyList.length>0 ? hitBodyList : HitBodyList
} }
// 头部点击语言
public static setHitHead(hitHeadList:Array<string>): void { public static setHitHead(hitHeadList:Array<string>): void {
HitHeadList = hitHeadList.length>0 ? hitHeadList : HitHeadList HitHeadList = hitHeadList.length>0 ? hitHeadList : HitHeadList
} }
// 模型绝对路径
public static setPathFull(pathfull:string): void {
ResourcesPath = pathfull.length>0 ? pathfull : ResourcesPath
}
} }

2
Samples/TypeScript/Demo/src/lapplive2dmanager.ts
View File

@ -197,6 +197,8 @@ export class LAppLive2DManager {
// ModelDir[]に保持したディレクトリ名から // ModelDir[]に保持したディレクトリ名から
// model3.jsonのパスを決定する。 // model3.jsonのパスを決定する。
// ディレクトリ名とmodel3.jsonの名前を一致させておくこと。 // ディレクトリ名とmodel3.jsonの名前を一致させておくこと。
// SSR服务端渲染的时候，无法正确读取资源。考虑把一个基础模型录入npm包
const model: string = LAppDefine.ModelDir[index]; const model: string = LAppDefine.ModelDir[index];
const modelPath: string = LAppDefine.ResourcesPath + model + '/'; const modelPath: string = LAppDefine.ResourcesPath + model + '/';
let modelJsonName: string = LAppDefine.ModelDir[index]; let modelJsonName: string = LAppDefine.ModelDir[index];

2
Samples/TypeScript/Demo/src/lappmodel.ts
View File

@ -403,12 +403,14 @@ export class LAppModel extends CubismUserModel {
} }
// WebGLのテクスチャユニットにテクスチャをロードする // WebGLのテクスチャユニットにテクスチャをロードする
// 在WebGL的纹理单元中加载纹理
let texturePath = this._modelSetting.getTextureFileName( let texturePath = this._modelSetting.getTextureFileName(
modelTextureNumber modelTextureNumber
); );
texturePath = this._modelHomeDir + texturePath; texturePath = this._modelHomeDir + texturePath;
// ロード完了時に呼び出すコールバック関数 // ロード完了時に呼び出すコールバック関数
// 加载完成时调用的回调函数
const onLoad = (textureInfo: TextureInfo): void => { const onLoad = (textureInfo: TextureInfo): void => {
this.getRenderer().bindTexture(modelTextureNumber, textureInfo.id); this.getRenderer().bindTexture(modelTextureNumber, textureInfo.id);

2
Samples/TypeScript/Demo/src/lapptexturemanager.ts
View File

@ -113,6 +113,8 @@ export class LAppTextureManager {
callback(textureInfo); callback(textureInfo);
}; };
img.src = fileName; img.src = fileName;
// 添加允许图片资源跨域请求
img.crossOrigin = "anonymous";
} }
/** /**