[Solved] Trying to load a scene from blender

[Amnesiac]

Hi,

I am trying to load a .babylon file exported from Blender, in the following way:

BABYLON.SceneLoader.Load("http://localhost:8080/babylon/", "cube.babylon", () => {}, () => {}, () => {});

and I get the following error:

Uncaught Error: No camera defined 

The babylon file does have a camera and it is being set as the active camera as you can see below:

{"producer":{"name":"Blender","version":"2.78 (sub 0)","exporter_version":"4.6.1","file":"cube.babylon"},
"autoClear":true,"clearColor":[0.0509,0.0509,0.0509],"ambientColor":[0,0,0],"gravity":[0,-9.81,0],
"materials":[{"name":"cube.Material","id":"cube.Material","ambient":[0.8,0.8,0.8],"diffuse":[0.64,0.64,0.64],"specular":[0.5,0.5,0.5],"emissive":[0,0,0],"specularPower":50,"alpha":1,"backFaceCulling":true,"checkReadyOnlyOnce":false}],
"multiMaterials":[],
"skeletons":[],
"meshes":[{"name":"Cube","id":"Cube","materialId":"cube.Material","billboardMode":0,"position":[0,0,0],"rotation":[0,0,0],"scaling":[1,1,1],"isVisible":true,"freezeWorldMatrix":false,"isEnabled":true,"checkCollisions":false,"receiveShadows":false
,"positions":[1,-1,-1,-1,-1,1,1,-1,1,-1,1,1,1,1,-1,1,1,1,-1,-1,-1,-1,1,-1]
,"normals":[0.5773,-0.5773,-0.5773,-0.5773,-0.5773,0.5773,0.5773,-0.5773,0.5773,-0.5773,0.5773,0.5773,0.5773,0.5773,-0.5773,0.5773,0.5773,0.5773,-0.5773,-0.5773,-0.5773,-0.5773,0.5773,-0.5773]
,"indices":[0,1,2,3,4,5,5,0,2,4,6,0,6,3,1,2,3,5,0,6,1,3,7,4,5,4,0,4,7,6,6,7,3,2,1,3]
,"subMeshes":[{"materialIndex":0,"verticesStart":0,"verticesCount":8,"indexStart":0,"indexCount":36}]
,"instances":[]}
],
"cameras":[{"name":"Camera","id":"Camera","position":[7.4811,5.3437,-6.5076],"rotation":[0.4615,-0.8149,0],"fov":0.8576,"minZ":0.1,"maxZ":100,"speed":1,"inertia":0.9,"checkCollisions":false,"applyGravity":false,"ellipsoid":[0.2,0.9,0.2],"cameraRigMode":0,"interaxial_distance":0.0637,"type":"FreeCamera"}],"activeCamera":"Camera",
"lights":[{"name":"Lamp","id":"Lamp","type":0,"position":[4.0762,5.9039,1.0055],"intensity":1,"diffuse":[1,1,1],"specular":[1,1,1]}],
"shadowGenerators":[]
}

Code where I am loading the scene:

/// <reference path="babylon.d.ts" />
module BASICS{
    export class BasicScene{

        private _engine: BABYLON.Engine;
        private _scene: BABYLON.Scene;

        constructor(canvas: HTMLCanvasElement){
            this._engine = new BABYLON.Engine(canvas);
            this._scene = new BABYLON.Scene(this._engine);

            BABYLON.SceneLoader.Load("http://localhost:8080/babylon/", "cube.babylon", this._engine, 
            (scene : BABYLON.Scene) => {
            },
            () => {},
            (scene : BABYLON.Scene) => {}
            );
          
        }


        public runRenderLoop(): void {
			this._engine.runRenderLoop(() => {
				this._scene.render();
			});
		}

       

    }
}

Javascript that calls the Babylon render:

basicScene = new BASICS.BasicScene(canvas);
basicScene.runRenderLoop();

Any help is greatly appreciated!

Thanks!

 

 

 

[gryff]

@Amnesiac: Welcome to the forum

I copied your code for the basic cube you posted above and saved it as a .babylon file.. Then opened it in the Babylon sandbox - result in image below.

It worked fine, though I do notice that you are using V4.6.1 of the Blender exporter. You should update your exporter to v5.3.

Your problems lie in the code you are using - and unfortunately - I no nothing about typescript.

Hopefully someone else can help..

cheers, gryff

[JCPalmer]

You are doing 2 things wrong:

• Do not call basicScene.runRenderLoop() immediately after instancing your class.  SceneLoader is run mostly in an async browser thread.  The camera will not have been created yet.  You need to either call it in the first call back passed or make sure you wait first.
• That brings me to the 2nd problem, you are explicitly creating your own scene, which is good, but using Load() not Append().  Load() takes an Engine and creates a scene that is passed in the callbacks.  You are actually creating 2 scenes.  Use Append() passing the scene instead of engine, then test before starting render loop:

basicScene = new BASICS...;
scene.executeWhenReady(function () {
    basicScene.runRenderLoop();
}

 

[Amnesiac]

@gryff Thank you  Nice to be here. Yeah, the .babylon works in the sandbox, I did not mention that in the question. Fixed the exporteer version too, never noticed that!

 

@JCPalmer That was very clear, it fixed the issue. Thanks a ton!

[8Observer8]

On 2017-5-29 at 6:13 PM, JCPalmer said:

Do not call basicScene.runRenderLoop() immediately after instancing your class.  SceneLoader is run mostly in an async browser thread.  The camera will not have been created yet.  You need to either call it in the first call back passed or make sure you wait first.

Thank you! You solved a problem that is in the book Babylon.js Essentials in Chapter3 folder: https://www.packtpub.com/code_download/23491

This is the original code from Chapter 3 folder:

loading.ts

/// <reference path="babylon.d.ts" />

module LOADING {
	export class LoadScene {
		/*
		* Public members
		*/
		
		/*
		* Private members
		*/
		private _canvas: HTMLCanvasElement;
		private _engine: BABYLON.Engine;
		private _scene: BABYLON.Scene;
		
		constructor(canvas: HTMLCanvasElement) {
			// Engine
			this._engine = new BABYLON.Engine(canvas);
			
			// Scene
			this._scene = new BABYLON.Scene(this._engine);
			
			/**
			* Load an exported scene
			* This static method contains 6 parameters
			* 1: the directory of the scene file
			* 2: the scene file name
			* 3: the Babylon.js engine
			* 4: a success callback, providing the new scene created by the loader
			* 5: progress callback, empty as default (can be null)
			* 6: error callback, providing the new scene created by the loader 
			*/
			BABYLON.SceneLoader.Load("./", "awesome_scene.babylon", this._engine,
			(scene: BABYLON.Scene) => { // Success calblack
				this._scene = scene;
				
				// We can now access the scene.meshes array etc.
				// Decal the meshes to 10 units on X
				for (var i=0; i < this._scene.meshes.length; i++) {
					this._scene.meshes[i].position.addInPlace(new BABYLON.Vector3(10, 0, 0));
				}
				
				// Just append the same scene 
				this._appendScene();
				
			}, () => { // Progress callback
				// Do something with your web page :)
			}, (scene: BABYLON.Scene) => { // Error callback
				
			});

		}
		
		/**
		* Runs the engine render loop
		*/
		public runRenderLoop(): void {
			this._engine.runRenderLoop(() => {
				this._scene.render();
			});
		}
		
		/**
		* This method appends new scene with the already existing scene
		* Here, we are appending the same scene at its original position
		*/
		private _appendScene(): void {
			BABYLON.SceneLoader.Append("./", "awesome_scene.babylon", this._scene, (scene: BABYLON.Scene) => {
				// Do something you want
			}, () => {
				// Progress
			}, (scene: BABYLON.Scene) => {
				// Error
			});
		}
		
		/**
		* Import the skull mesh (available in the Babylon.js examples)
		* This methods imports meshes and only meshes.
		*/
		private _importMesh(): void {
			BABYLON.SceneLoader.ImportMesh("", "./", "skull.babylon", this._scene,
			(meshes, particles, skeletons) => { // Success callback
				// Here, meshes contains only one mesh: the skull (meshes[0])
				// Particles array is empty
				// skeletons array is empty
				
			}, () => { // Progress callback
				
			}, (scene: BABYLON.Scene, e: any) => {
				// Do something
				console.log(e.message);
			});
		}
	}
	
}

 

[JCPalmer]

maybe you need to notify packpub.  They sort of fix their code by re-assigning the scene member in the callback, but first instancing is unnecessary.  Append() is a newer function.  It helps fix scoping issues & multiple copies of scene that were common problems.