Trying to asynchronously load a mesh but results in an empty scene

Questions
1

Hello, could you help me with this? I tried to replicate this example: Babylon.js Playground in my project but I couldn’t get it to load the mesh

 const canvas = document.getElementById("renderCanvas"); // Get the canvas element

		
        const engine = new BABYLON.Engine(canvas, true); // Generate the BABYLON 3D engine

		
        // Add your code here matching the playground format
        var createScene = async function () {
    
        var scene = new BABYLON.Scene(engine);  

	var defaultPipeline = new BABYLON.DefaultRenderingPipeline(
        "DefaultRenderingPipeline",
        true, // is HDR?
        scene,
        scene.camera
    );

					engine.setHardwareScalingLevel(0.5);
			

    if (defaultPipeline.isSupported) {
        defaultPipeline.samples = 4; 

		
        defaultPipeline.imageProcessingEnabled = true; 
        if (defaultPipeline.imageProcessingEnabled) {
            defaultPipeline.imageProcessing.contrast = 1; 
            defaultPipeline.imageProcessing.exposure = 1; 

		}}
			
				
			
				//CAMERA  
			var camdistance =  localStorage.getItem("camdistance");
			var camX = localStorage.getItem("camerax");
			var camY = localStorage.getItem("cameray");
			var camZ = localStorage.getItem("cameraz");
			
            var camera = new BABYLON.ArcRotateCamera("camera", -0.4, 1.2, parseInt(camdistance), new BABYLON.Vector3(parseInt(camX), parseInt(camY), parseInt(camZ)));
            camera.attachControl(canvas, true);
			
			
			//LIGHTS
			
           const lighthemi = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(1, 1, 0));
		   lighthemi.intensity = 0.4;
			                                                          
			
var  light = new BABYLON.DirectionalLight("dir01", new BABYLON.Vector3(0, -100, 20), scene); //200, -10, 200
light.position = new BABYLON.Vector3(0, -5, -550); //0, 150, -250    
		light.intensity = parseInt(localStorage.getItem("dirintensity"));		

			
var  light2 = new BABYLON.DirectionalLight("dir02", new BABYLON.Vector3(-200, -100, 50), scene); //200, -10, 200
light2.position = new BABYLON.Vector3(0, 0, -550); //0, 150, -250    
		light2.intensity =0.6*parseInt(localStorage.getItem("dirintensity"));					
			
			
var  light3 = new BABYLON.DirectionalLight("dir03", new BABYLON.Vector3(200, -50, -50), scene); //200, -10, 200
light3.position = new BABYLON.Vector3(0, 0, -100); //0, 150, -250    
		light3.intensity = 0.6*parseInt(localStorage.getItem("dirintensity"));		
			
			
			

			canvas.removeEventListener('mousewheel', camera._wheel);canvas.removeEventListener('DOMMouseScroll', camera._wheel);
			camera.inputs.attached.pointers.buttons = [0,1]; // disables right button
			camera.panningSensibility = 0; 
			camera.lowerRadiusLimit = camdistance;
			camera.upperRadiusLimit = camdistance;
			camera.minZ = 0;
			//camera.useAutoRotationBehavior = true;

			// Shadows
	var shadowGenerator = new BABYLON.ShadowGenerator(2048, light);

		
					//GROUND
			var ground = BABYLON.Mesh.CreateGround("ground", 200, 200, 10, scene);

			// Colour the ground
        var material = new BABYLON.StandardMaterial(scene);
        material.alpha = 1;
		material.diffuseColor = new BABYLON.Color3(0.3, 0.3, 0.3);	
		material.specularColor = new BABYLON.Color3(0, 0, 0);
        ground.material = material;
		ground.receiveShadows = true;
				
				//MESH  
	var meshname = localStorage.getItem("meshname");
			var mesh =  await BABYLON.SceneLoader.ImportMeshAsync("","./3D/glTF/", meshname+".glb", scene, function (newMeshes) {
			var name = newMeshes[0].name;
     		var mesh = scene.meshes[0];     
	shadowGenerator.addShadowCaster(scene.meshes[1])
				
	shadowGenerator.useBlurExponentialShadowMap = true;
    shadowGenerator.useKernelBlur = true;
    shadowGenerator.blurKernel = 24;
	shadowGenerator._darkness = 0;
				/*

					scene.registerBeforeRender(function() {
				//light.position = camera.position;
        newMeshes[0].rotate(BABYLON.Vector3.Up(), -Math.PI / 2400);
    })*/
				
    });
            return scene;
        };
		
		

        const scene = createScene(); //Call the createScene function
//scene.clearColor = new BABYLON.Color4(0, 0, 0, 0);
        // Register a render loop to repeatedly render the scene
        engine.runRenderLoop(function () {
			
                scene.render();
			
        });

        // Watch for browser/canvas resize events
        window.addEventListener("resize", function () {
                engine.resize();
        });
2

Your createScene function is async but you are not awaiting it when you call it

const scene = createScene(); should either use createScene().then(…) or await createScene() I guess

3 Likes