添加蒙层,模型未加载完毕前无法操作

This commit is contained in:
chendishen 2020-09-18 15:43:12 +08:00
parent fe5b342032
commit 2d8e100275
7 changed files with 56 additions and 14 deletions

File diff suppressed because one or more lines are too long

View File

@ -1 +1 @@
{"h":"2d476862ae84fddf329a","c":{"main":true}} {"h":"f7b9d5e2581cdd0feba1","c":{"main":true}}

View File

@ -164,6 +164,16 @@ function ReactLive2d(props) {
height: props.height ? props.height : '500', height: props.height ? props.height : '500',
id: "live2d-container" id: "live2d-container"
}, /*#__PURE__*/_react["default"].createElement("div", { }, /*#__PURE__*/_react["default"].createElement("div", {
id: "live2d-hidden",
style: {
width: '100%',
height: '100%',
position: 'absolute',
top: '0',
left: '0',
zIndex: '2'
}
}), /*#__PURE__*/_react["default"].createElement("div", {
id: "live2d-print", id: "live2d-print",
style: printStyle style: printStyle
}), /*#__PURE__*/_react["default"].createElement("canvas", { }), /*#__PURE__*/_react["default"].createElement("canvas", {

View File

@ -344,6 +344,7 @@ export class LAppModel extends CubismUserModel {
// Motion // Motion
const loadCubismMotion = (): void => { const loadCubismMotion = (): void => {
document.getElementById('live2d-hidden').style.display='block'
this._state = LoadStep.WaitLoadMotion; this._state = LoadStep.WaitLoadMotion;
this._model.saveParameters(); this._model.saveParameters();
this._allMotionCount = 0; this._allMotionCount = 0;
@ -765,18 +766,27 @@ export class LAppModel extends CubismUserModel {
this._motions.setValue(name, tmpMotion); this._motions.setValue(name, tmpMotion);
this._motionCount++; this._motionCount++;
if (this._motionCount >= this._allMotionCount && this._motionManager) { // console.log('this._motionCount',this._motionCount)
// console.log('this._allMotionCount',this._allMotionCount)
if (this._motionCount >= this._allMotionCount) {
this._state = LoadStep.LoadTexture; this._state = LoadStep.LoadTexture;
// 全てのモーションを停止する // 全てのモーションを停止する
document.getElementById('live2d-hidden').style.display='none'
if(this._motionManager){
this._motionManager.stopAllMotions(); this._motionManager.stopAllMotions();
this.createRenderer();
this.setupTextures();
this.getRenderer().startUp(gl);
}
this._updating = false; this._updating = false;
this._initialized = true; this._initialized = true;
this.createRenderer(); // this.createRenderer();
this.setupTextures(); // this.setupTextures();
this.getRenderer().startUp(gl); // this.getRenderer().startUp(gl);
document.getElementById('live2d').style.visibility='visible'
} }
}); });
} }

View File

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

View File

@ -132,6 +132,18 @@ function ReactLive2d(props) {
width={props.width ? props.width : '300'} width={props.width ? props.width : '300'}
height={props.height ? props.height : '500'} height={props.height ? props.height : '500'}
id="live2d-container"> id="live2d-container">
<div id="live2d-hidden"
style={{
width:'100%',
height:'100%',
position:'absolute',
top:'0',
left:'0',
zIndex:'2'
}}
>
</div>
<div id="live2d-print" <div id="live2d-print"
style={printStyle} style={printStyle}
></div> ></div>

View File

@ -344,6 +344,7 @@ export class LAppModel extends CubismUserModel {
// Motion // Motion
const loadCubismMotion = (): void => { const loadCubismMotion = (): void => {
document.getElementById('live2d-hidden').style.display='block'
this._state = LoadStep.WaitLoadMotion; this._state = LoadStep.WaitLoadMotion;
this._model.saveParameters(); this._model.saveParameters();
this._allMotionCount = 0; this._allMotionCount = 0;
@ -765,18 +766,27 @@ export class LAppModel extends CubismUserModel {
this._motions.setValue(name, tmpMotion); this._motions.setValue(name, tmpMotion);
this._motionCount++; this._motionCount++;
if (this._motionCount >= this._allMotionCount && this._motionManager) { // console.log('this._motionCount',this._motionCount)
// console.log('this._allMotionCount',this._allMotionCount)
if (this._motionCount >= this._allMotionCount) {
this._state = LoadStep.LoadTexture; this._state = LoadStep.LoadTexture;
// 全てのモーションを停止する // 全てのモーションを停止する
document.getElementById('live2d-hidden').style.display='none'
if(this._motionManager){
this._motionManager.stopAllMotions(); this._motionManager.stopAllMotions();
this.createRenderer();
this.setupTextures();
this.getRenderer().startUp(gl);
}
this._updating = false; this._updating = false;
this._initialized = true; this._initialized = true;
this.createRenderer(); // this.createRenderer();
this.setupTextures(); // this.setupTextures();
this.getRenderer().startUp(gl); // this.getRenderer().startUp(gl);
document.getElementById('live2d').style.visibility='visible'
} }
}); });
} }