Error in onSuccess callback: TypeError: Cannot read properties of undefined (reading '0')

Sometimes while loading the importing the glb it gives an error but after page refresh error not showing.
can anyone help me out, how to fix that issue.

BJS Unable to load from /xxxxpath/scenes/RR_310_Red.glb: 
Error in onSuccess callback: 
TypeError: Cannot read properties of undefined (reading '0')
function redBikeMeshLoad(scene, shadowGenerator) {
  // red bike RR_310_Red loaded
  BABYLON.SceneLoader.ImportMesh(
    "",
    "./assets/RR310/scenes/",
    "RR_310_Red.glb",
    scene,
    function (meshes) {
      red_bike_meshes = meshes;
      mesh = meshes[0];

      // shadow generator
      shadowGenerator.addShadowCaster(mesh);


      // default bike select
      rootMeshEnabled("red");
    }
  );
}

function rootMeshEnabled(bikeName = "red") {
  if (bikeName === "red") {
    red_bike_meshes[0].setEnabled(true);
    const redGroup1Chidren = red_bike_meshes[0].getChildren();
    redGroup1Chidren.forEach((e) => {
      if (e.name === "group1") {
        e.setEnabled(false);
      }
    });
    black_bike_meshes[0].setEnabled(false);
  } else if (bikeName === "black") {
    red_bike_meshes[0].setEnabled(false);
    black_bike_meshes[0].setEnabled(true);
    const blackGroup1Children = black_bike_meshes[0].getChildren();
    blackGroup1Children.forEach((e) => {
      if (e.name === "group1") {
        e.setEnabled(false);
      }
    });
  }
}

Hi, as the error say, …we need to see your onSuccess function because there is the problem :upside_down_face:

updated…Is this using rootMeshEnabled function???

Where do you initialize black_bike_meshes variable?

Basically I’m loading two Glb files one is red and another is black. and then called it under create scene function.

There is function called meshLoad.

function meshLoad(scene, shadowGenerator) {
  blackBikeMeshLoad(scene, shadowGenerator);
  redBikeMeshLoad(scene, shadowGenerator);
}

const createScene = function () {
  const scene = new BABYLON.Scene(engine);
  scene.createDefaultEnvironment({
    environmentTexture: DEFAULT_ENVIRONMENT_TEXTURE_PATH,
    createSkybox: false,
    createGround: false,
  });

  // Create a camera
  camera = new BABYLON.ArcRotateCamera(
    "ArcRotateCamera",
    0,
    0,
    0,
    new BABYLON.Vector3.Zero(),
    scene
  );

  // camera target set
  camera.setTarget(new BABYLON.Vector3(-0.001, 0.42, -0.001));

  // Attaches the camera to the canvas
  camera.attachControl(canvas, true);

  // Shadow DirectionalLight
  var light1 = new BABYLON.DirectionalLight(
    "ShadowDirectionalLight",
    new BABYLON.Vector3(0, -1, 0),
    scene
  );

  // Add Plane Ground For Shadow Generate
  var ground = BABYLON.MeshBuilder.CreateGround(
    "BikeShadowGround",
    { width: 100, height: 100 },
    scene
  );
  ground.position.y = 0;
  ground.material = new BABYLON.ShadowOnlyMaterial("ShadowOnlyMaterial", scene);
  ground.receiveShadows = true;

  // Shadow Generator
  shadowGenerator = new BABYLON.ShadowGenerator(SHADOW_MAP_SIZE, light1);
  shadowGenerator.transparencyShadow = true;
  shadowGenerator.usePoissonSampling = true;
  shadowGenerator.darkness = shadowDarkness;

  meshLoad(scene, shadowGenerator);

  return scene;
};

Then I think this is the issue: you are not waiting for your both meshes to be completly loaded, so sometimes works sometimes no.
I would recomand you to use ImportMeshAsync instead. Or load your second mesh in the OnSuccess callback function of first mesh, and handle them both in the second OnSuccess function. Here are some examples

2 Likes