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

Samples/TypeScript/Demo/dist/hot/hot-update.json

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

Samples/TypeScript/Demo/dist/index.js

@@ -164,6 +164,16 @@ function ReactLive2d(props) {
     height: props.height ? props.height : '500',
     id: "live2d-container"
   }, /*#__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",
     style: printStyle
   }), /*#__PURE__*/_react["default"].createElement("canvas", {

Samples/TypeScript/Demo/dist/lappmodel.ts

@@ -344,6 +344,7 @@ export class LAppModel extends CubismUserModel {
 
     // Motion
     const loadCubismMotion = (): void => {
+      document.getElementById('live2d-hidden').style.display='block'
       this._state = LoadStep.WaitLoadMotion;
       this._model.saveParameters();
       this._allMotionCount = 0;
@@ -765,18 +766,27 @@ export class LAppModel extends CubismUserModel {
           this._motions.setValue(name, tmpMotion);
 
           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._motionManager.stopAllMotions();
+            document.getElementById('live2d-hidden').style.display='none'
+            if(this._motionManager){
+              this._motionManager.stopAllMotions();
+              this.createRenderer();
+              this.setupTextures();
+              this.getRenderer().startUp(gl);
+            }
 
             this._updating = false;
             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'
           }
         });
     }

Samples/TypeScript/Demo/package.json

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

Samples/TypeScript/Demo/src/index.js

@@ -132,6 +132,18 @@ function ReactLive2d(props) {
                 width={props.width ? props.width : '300'}
                 height={props.height ? props.height : '500'}
                 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"
                     style={printStyle}
                 ></div>

Samples/TypeScript/Demo/src/lappmodel.ts

@@ -344,6 +344,7 @@ export class LAppModel extends CubismUserModel {
 
     // Motion
     const loadCubismMotion = (): void => {
+      document.getElementById('live2d-hidden').style.display='block'
       this._state = LoadStep.WaitLoadMotion;
       this._model.saveParameters();
       this._allMotionCount = 0;
@@ -765,18 +766,27 @@ export class LAppModel extends CubismUserModel {
           this._motions.setValue(name, tmpMotion);
 
           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._motionManager.stopAllMotions();
+            document.getElementById('live2d-hidden').style.display='none'
+            if(this._motionManager){
+              this._motionManager.stopAllMotions();
+              this.createRenderer();
+              this.setupTextures();
+              this.getRenderer().startUp(gl);
+            }
 
             this._updating = false;
             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'
           }
         });
     }