I want to hide the loading icon after the material drawing is loaded. What should I do?

Questions
1

If you start loading here

    SceneLoader.LoadAssetContainer(
      "https://cms-oss-sh-dev.oss-cn-shanghai.aliyuncs.com/jpc/2021-03-10/3D_Model/",
      "115.obj",
      this.scene,
      (container) => {
        this.scene.executeWhenReady(() => {
          // debugger;
          // Attach camera.
          // let materialList = [
          //   "https://cms-oss-sh-dev.oss-cn-shanghai.aliyuncs.com/jpc/2021-03-10/pi-0/pi-0_COL.png",
          //   "https://cms-oss-sh-dev.oss-cn-shanghai.aliyuncs.com/jpc/2021-03-10/pi-0/pi-0_DISP.jpg",
          //   "https://cms-oss-sh-dev.oss-cn-shanghai.aliyuncs.com/jpc/2021-03-10/pi-0/pi-0_NRM.jpg",
          //   "https://cms-oss-sh-dev.oss-cn-shanghai.aliyuncs.com/jpc/2021-03-10/pi-0/pi-0_ROUGH.jpg",
          //   "https://cms-oss-sh-dev.oss-cn-shanghai.aliyuncs.com/jpc/2021-03-10/pi-0/pi-0_COL.png",
          //   "https://cms-oss-sh-dev.oss-cn-shanghai.aliyuncs.com/jpc/2021-03-10/pi-0/pi-0_ALPHA.jpg",
          // ];
          // let materialList = [
          // "https://cms-oss-sh-dev.oss-cn-shanghai.aliyuncs.com/jpc/2021-03-10/FabricLeatherSplitVintage002/FabricLeatherSplitVintage002_COL_VAR1_4K.jpg",
          // "https://cms-oss-sh-dev.oss-cn-shanghai.aliyuncs.com/jpc/2021-03-10/FabricLeatherSplitVintage002/FabricLeatherSplitVintage002_DISP_4K.jpg",
          // "https://cms-oss-sh-dev.oss-cn-shanghai.aliyuncs.com/jpc/2021-03-10/FabricLeatherSplitVintage002/FabricLeatherSplitVintage002_NRM_4K.jpg",
          // "https://cms-oss-sh-dev.oss-cn-shanghai.aliyuncs.com/jpc/2021-03-10/FabricLeatherSplitVintage002/FabricLeatherSplitVintage002_BUMP_4K.jpg",
          // "https://cms-oss-sh-dev.oss-cn-shanghai.aliyuncs.com/jpc/2021-03-10/FabricLeatherSplitVintage002/FabricLeatherSplitVintage002_REFL_4K.jpg",
          // "https://cms-oss-sh-dev.oss-cn-shanghai.aliyuncs.com/jpc/2021-03-10/FabricLeatherSplitVintage002/FabricLeatherSplitVintage002_AO_4K.jpg",
          // "https://cms-oss-sh-dev.oss-cn-shanghai.aliyuncs.com/jpc/2021-03-10/FabricLeatherSplitVintage002/FabricLeatherSplitVintage002_GLOSS_4K.jpg",
          // ];

          if (!this.scene.activeCamera) {
            throw new Error(
              "No camera defined in the scene. Please add at least one camera in the project or create one yourself in the code."
            );
          }
          container.meshes.forEach((mesh: any) => {
            mesh.material = new PBRMetallicRoughnessMaterial("pbr", this.scene);
            // mesh.position = new Vector3(0, -800, 0);
            mesh.material.metallic = 0.0;
            mesh.material.roughness = 1;
            mesh.material.alpha = 1;
            mesh.material.metallicF0Factor = 0;

            mesh.material.useRoughnessFromMetallicTextureAlpha = false;
            mesh.material.useRoughnessFromMetallicTextureGreen = true;
            mesh.material.useMetallnessFromMetallicTextureBlue = true;
            //截图是模型保持中心
            mesh.material.useAmbientInGrayScale = true;

            mesh.scaling.z = 4;
            mesh.scaling.y = 4;
            mesh.scaling.x = 4;
            mesh.alwaysSelectAsActiveMesh = true;

            let uScale = 8;
            let vScale = 8;
            //颜色

            mesh.material.baseTexture = new Texture(
              materialList[0],
              this.scene
            );
            mesh.material.baseTexture.uScale = uScale;
            mesh.material.baseTexture.vScale = vScale;

            mesh.material.normalTexture = new Texture(
              materialList[1],
              this.scene
            );
            mesh.material.normalTexture.uScale = uScale;
            mesh.material.normalTexture.vScale = vScale;

            mesh.material.useParallax = true;
            mesh.material.useParallaxOcclusion = true;
            mesh.material.parallaxScaleBias = 11;
            mesh.material.specularPower = 1000.0;

            // 金属/粗糙
            mesh.material.metallicRoughnessTexture = new Texture(
              materialList[2],
              this.scene
            );
            mesh.material.metallicRoughnessTexture.uScale = uScale;
            mesh.material.metallicRoughnessTexture.vScale = vScale;
            mesh.material.invertNormalMapX = true;
            mesh.material.invertNormalMapY = true;

            // this.shadowGenerator.getShadowMap().renderList.push(mesh);
          });
          container.addAllToScene();
        });
      },
      null,
      function (err) {
        console.log("err", err);
      }
    );

where i can hide my loading ? http://bj.quadtalent.com/sample/?id=1322
Where can I hear that the model and material drawing are loaded?

2

You can hide and show the loading screen using the engine’s functions:

// show loading screen
engine.displayLoadingUI();
// hide the loading screen when you want to
engine.hideLoadingUI();

You can check if a mesh is ready (including its material) or a material is ready using their isReady functions:

3

OK, This way resolve my problem, thank you!!

1 Like