React native crashing when switching glb files

Hi working on a react native project where I render certain glb file conditionally check code below:

const getRandomInt = (min: number, max: number): number => {
      min = Math.ceil(min);
      max = Math.floor(max);
      return Math.floor(Math.random() * (max - min + 1)) + min;
    };
    let file;
    const glbMap: any = {
      Baby: 'https://github.com/Timas/SE-PROJECT/blob/master/Baby.glb?raw=true',
      Teen: 'https://github.com/Timas/SE-PROJECT/blob/master/Teen.glb?raw=true',
      Elder: 'https://github.com/Timas/SE-PROJECT/blob/master/Elder.glb?raw=true',
      Adult: 'https://github.com/Timas/SE-PROJECT/blob/master/Adult.glb?raw=true',
      Baby_red: 'https://github.com/Timas/SE-PROJECT/blob/master/Baby_red.glb?raw=true',
      Teen_red: 'https://github.com/Timas/SE-PROJECT/blob/master/Teen_red.glb?raw=true',
      Elder_red: 'https://github.com/Timas/SE-PROJECT/blob/master/Elder_red.glb?raw=true',
      Adult_red: 'https://github.com/Timas SE-PROJECT/blob/master/Adult_red.glb?raw=true',
    };

    if (props.percent <= 25) {
      console.log(`EngineScreen - 51`, props.skinColor);
      switch (props.skinColor) {
        case 'Base':
          file = glbMap.Baby;
          break;
        case 'Red':
          file = glbMap.Baby_red;
          break;
        default:
          file = glbMap.Baby;
          break;
      }
    } else if (props.percent > 25 && props.percent <= 50) {
      switch (props.skinColor) {
        case 'Base':
          file = glbMap.Teen;
          break;
        case 'Red':
          file = glbMap.Teen_red;
          break;
        default:
          file = glbMap.Teen;
          break;
      }
    } else if (props.percent > 50 && props.percent <= 75) {
      switch (props.skinColor) {
        case 'Base':
          file = glbMap.Elder;
          break;
        case 'Red':
          file = glbMap.Elder_red;
          break;
        default:
          file = glbMap.Elder;
          break;
      }
    } else {
      switch (props.skinColor) {
        case 'Base':
          file = glbMap.Adult;
          break;
        case 'Red':
          file = glbMap.Adult_red;
          break;
        default:
          file = glbMap.Adult;
          break;
      }
    }

    const uri = file;
    SceneLoader.Append
    SceneLoader.LoadAsync(uri, undefined, engine)
      .then(scene => {
        const animationNumber = getRandomInt(0, scene.animationGroups.length - 1);
        setScene(scene);
        scene.createDefaultCameraOrLight(true, undefined, true);
        (scene.activeCamera as ArcRotateCamera).alpha += Math.PI;
        if (props.percent <= 25) {
          (scene.activeCamera as ArcRotateCamera).radius = 5;
          scene.animationGroups[animationNumber].start(true);
        } else if (props.percent > 25 && props.percent <= 50) {
          (scene.activeCamera as ArcRotateCamera).radius = 15;
          scene.animationGroups[animationNumber].start(true);
        } else if (props.percent > 50 && props.percent <= 75) {
          (scene.activeCamera as ArcRotateCamera).radius = 25;
          scene.animationGroups[animationNumber].start(true);
        } else if (props.percent > 75 && props.percent !== 100) {
          (scene.activeCamera as ArcRotateCamera).radius = 20;
          scene.animationGroups[animationNumber].start(true);
        } else if (props.percent === 100) {
          (scene.activeCamera as ArcRotateCamera).radius = 30;
          scene.animationGroups[animationNumber].start(true);
        }
        (scene.activeCamera as ArcRotateCamera).speed = 0.2;
        (scene.activeCamera as ArcRotateCamera).wheelDeltaPercentage = 1.5;
        scene.audioEnabled = true;
        setCamera(scene.activeCamera!);
      })
      .catch(e => {
        flashError('Failed to load dragon screen');
        console.log(`EngineScreen - 131`, e);
      });

Now this works well however the issue now comes in when a user is to click so to change the type of glb iOS then crashes saying, “Message from debugger: Terminated due to memory issue”

Question

  • What is the best or a way of changing glb file to render conditionally

You should probably clean up the resources that you aren’t using when you switch from one mesh to another: AbstractMesh | Babylon.js Documentation (babylonjs.com)

1 Like