The scene doesn't load every time

[cendri11on]

I am building a game using babylon.js and I just ran into a problem. The game is about a chicken that has to find its way back to the henhouse, and on the way there are several tractors driving around that can run over the chicken. The scene loads allright, but when I add animation so that the tractors can move, the scene doesn't load when I start it and I have to refresh it a few times. Does anyone know what could be the problem and how to solve it so that the scene will load when you start the game?

 

here is my main code:

var engine;
var scene;
var canvas;
var chicken;
var henhouse;
var tractor;
var tractor2;
var tractor3;

document.addEventListener("DOMContentLoaded", function () {
    onload();
}, false);

window.addEventListener("resize", function () {
	if (engine) {
		engine.resize();
	}
},false);

var onload = function () {
    canvas = document.getElementById("renderCanvas");
	engine = new BABYLON.Engine(canvas, true);

	initScene();

	engine.runRenderLoop(function () {
        scene.render();
	});
};

var createSkybox = function() {
    var skybox = BABYLON.Mesh.CreateSphere("skyBox", 100, 1000, scene);

    BABYLON.Engine.ShadersRepository = "shaders/";

    var shader = new BABYLON.ShaderMaterial("gradient", scene, "gradient", {});
    shader.setFloat("offset", 10);
    shader.setColor3("topColor", BABYLON.Color3.FromInts(0,119,255));
    shader.setColor3("bottomColor", BABYLON.Color3.FromInts(240,240, 255));

    shader.backFaceCulling = false;

    skybox.material = shader;
};


var initScene = function() {
    scene = new BABYLON.Scene(engine);

    scene.clearColor=new BABYLON.Color3(0.8,0.8,0.8);

    // Camera attached to the canvas -> chicken doesnt move
	//var camera = new BABYLON.ArcRotateCamera("Camera", 0.67, 1.2, 150, BABYLON.Vector3.Zero(), scene);
	//camera.attachControl(canvas);
	
	//Create the camera -> chicken is moving
	camera = new BABYLON.FreeCamera("camera", new BABYLON.Vector3(200, 6,-300), scene);
	camera.setTarget(new BABYLON.Vector3(0,0,0));
	
    var h = new BABYLON.HemisphericLight("hemi", new BABYLON.Vector3(0, 1, -1), scene);
	h.intensity = 0.85;
	
    var d = new BABYLON.DirectionalLight("dir", new BABYLON.Vector3(1, -1, -2), scene);
    d.position = new BABYLON.Vector3(-300,300,600);
    var shadowGenerator = new BABYLON.ShadowGenerator(2048, d);

	createSkybox();

    var ground = BABYLON.Mesh.CreateGround("ground", 1000, 2000, 2, scene);
    ground.material = new BABYLON.StandardMaterial("ground", scene);
    ground.material.diffuseColor = BABYLON.Color3.FromInts(193, 181, 151);
    ground.material.specularColor = BABYLON.Color3.Black();

    ground.receiveShadows = true;

	scene.gravity = new BABYLON.Vector3(0, -0.9, 0);
	
    var tg = new TreeGenerator(scene, shadowGenerator);	
	
    // Number of lanes
    var LANE_NUMBER = 4;
    var LANE_INTERVAL = 160; // distance between lanes
    var LANES_POSITIONS = [];

    // Function to create lanes
    var createLane = function (id, position) {
        var lane = BABYLON.Mesh.CreateBox("lane"+id, 1, scene);
        lane.scaling.y = 0.1;
        lane.scaling.x = 15; 
        lane.scaling.z = 1100;
        lane.position.x = position;
        lane.position.z = lane.scaling.z/2-600;
		lane.rotation.y = 180;
    };

    var currentLanePosition = LANE_INTERVAL * -1 * (LANE_NUMBER/2);
    for (var i = 0; i<LANE_NUMBER; i++){
        LANES_POSITIONS[i] = currentLanePosition;
        createLane(i, currentLanePosition);
        currentLanePosition += LANE_INTERVAL;
    }

	// MESH IMPORTS
	BABYLON.SceneLoader.ImportMesh("", "assets/", "chicken.babylon", scene, function (newMeshes) {
		chicken = newMeshes[0];
		chicken.position.y = 1;
		chicken.position.x = 180;
		chicken.position.z = -280;
		
		camera.target = chicken;
		
		chicken.rotation.y = -1;
	});
	
	BABYLON.SceneLoader.ImportMesh("", "assets/", "henhouse.babylon", scene, function (newMeshes) {
        henhouse = newMeshes[0];
        henhouse.scaling.x = 4;
        henhouse.scaling.y = 4;
        henhouse.scaling.z = 4;
        henhouse.position.z = 350 ;//+ 50;
		henhouse.position.x = -200;
		henhouse.rotation.y += -0.5;
	});
	
	BABYLON.SceneLoader.ImportMesh("", "", "assets/tractor.babylon", scene, function (newMeshes) {
        
        tractor = newMeshes[0];
        tractor.scaling.x = 4;
        tractor.scaling.y = 4;
        tractor.scaling.z = 4;
		tractor.position.y = 3.6;
		tractor.position.x = -72;
		tractor.rotation.z = 0.04;
		tractor.rotation.y = -0.6;
		
	});	
		
	BABYLON.SceneLoader.ImportMesh("", "", "assets/tractor.babylon", scene, function (newMeshes) {
		tractor2 = newMeshes[0];
        tractor2.scaling.x = 4;
        tractor2.scaling.y = 4;
        tractor2.scaling.z = 4;
		tractor2.position.y = 3.6;
		tractor2.position.x = 95;
		tractor2.position.z = -20;
		tractor2.rotation.z = 0.04;
		tractor2.rotation.y = -3.5;
	});	
	
	BABYLON.SceneLoader.ImportMesh("", "", "assets/tractor.babylon", scene, function (newMeshes) {
		tractor3 = newMeshes[0];
        tractor3.scaling.x = 4;
        tractor3.scaling.y = 4;
        tractor3.scaling.z = 4;
		tractor3.position.y = 3.6;
		tractor3.position.x = -15;
		tractor3.position.z = -190;
		tractor3.rotation.z = 0.04;
		tractor3.rotation.y = -0.6;
	});	
	
	//tractor animation
	scene.registerBeforeRender(function() {   
		tractor.position.x += 0.6;
		if(tractor.position.x >=90){
			tractor.position.x = -72;
		}
		tractor2.position.x -= 0.6;
		if(tractor2.position.x <=-80){
			tractor2.position.x = 95;
		}
		tractor3.position.x += 0.6;
		if(tractor3.position.x >=170){
			tractor3.position.x = -15;
		}
	});
};

//moving the chicken
window.addEventListener("keydown", function (event) {
  switch(event.keyCode) {
    
	/*case 76:
	    chicken.position.z += 1;
		chicken.rotation.x += 0.5;
		camera.position.z += 1;
	break;*/
	case 37:
		//right
		chicken.position.x += -1;
		chicken.rotation.y += -0.001;
		camera.position.x += -1;
		//camera.rotation.y += -0.01;
		break;
    case 39:
		//left
	    chicken.rotation.y += 0.001;
		chicken.position.x += 1;
		camera.position.x += 1;
		//camera.rotation.y += 0.005;
		break;
    case 40:
		//backwards
		chicken.position.z += -1;
		camera.position.z += -1;
		break;
    case 38:
		//forward
		chicken.position.z += 1;
		camera.position.z += 1;
		break;
	case 32:
		//jumping
		chicken.position.y += 2;
		camera.position.z += 1;
		chicken.position.z += 1;
		//pause
		//yield to.sleep(.500);
		setTimeout(function(){
			chicken.position.y -= 2;
		},150); 
		break;
  }
}, true);

 

[RaananW]

My assumption - you didn'T pay attention to the async nature of JavaScript. But this is really just an assumption

Notice that you are calling a function before each render, that ready the tractors' positions, but you load the before using the (async) ImportMesh function, that only sets them after loading the scene file. So an exception is expected to be thrown, and your scene will not render correctly (or not at all).

Try using the assets manager to define mesh loading tasks, and start your game only after all tasks have ended. 

Again - I have no idea if this is the problem, but give it a try. Can't hurt  

[dbawel]

Use the asset manager to load all assets - only then initiate your scene.

DB