How to load *.babylon exported from blender using JavaScript/FileApi/XHR?

[deni]

I'm pretty fine working with the .babylon file format. Exporter which was developed for Blender 3D editor works perfectly and if to load the exported model using the next code:

// won't write the full code// because it was fetched from the playground and it's very standard and worksBABYLON.SceneLoader.Load("", "fileName.babylon", engine, function (newScene) {...

works well and WebGL renderer in browser shows my model.

But, what if I don't want to load models as static files which must be saved in public folder of HTTP-server ( IIS, Apache, lighttpd, nginx, etc.. ).

For e.g. I wanna load a .babylon file from the user's side or to secure the access to .babylon files at my backend.

All right, let's watch the situation, if I provide some kind of Uploader (using File API from browser) in my web-application, from which user will be able to load 3D-models from their PC or other devices.

I'm trying to load models like this way:

File uploading ( change event of input-file ) which works well:

 function handleFiles( event ) {        var uploader = event.srcElement || event.currentTarget;        var files = uploader.files;        var reader = new FileReader();        reader.onload = function( event ) {            var data = JSON.parse( event.target.result );            loadCustomMesh( data );        };        // passing only single mesh because of testing purpose        reader.readAsText( files[ 0 ] );    }

Handling geometry and adding to scene:

function loadCustomMesh( data ) {    var mesh = new BABYLON.Mesh( Math.random().toString(), scene );    mesh.setVerticesData( BABYLON.VertexBuffer.PositionKind, data.meshes[ 0 ].positions, true );    mesh.setVerticesData( BABYLON.VertexBuffer.NormalKind, data.meshes[ 0 ].normals, true );    mesh.setIndices( data.meshes[ 0 ].indices );    mesh.position = new BABYLON.Vector3( 0, 0, 0 );    ...

It works FINE! But!!! Without materials...

I've found that multimaterial is here from the uploaded data:

But if to use the next code:

mesh.material = data.multiMaterials[ 0 ];

Which is valid exactly for this sample, it throws the next error:

Uncaught TypeError: t.needAlphaBlending is not a function

And I don't even know what to do next, any ideas?

[JCPalmer]

There is in-line textures possible as of 3.0.  It was for reducing network latency, but may be useful to try.  It is on the scene properties tab

[deni]

There is in-line textures possible as of 3.0.  It was for reducing network latency, but may be useful to try.  It is on the scene properties tab

Don't understand at all what you have said.

 

Inline textures? What is it?

Latency?

I may upload it from localhost using File API and then register to scene. So what latency? Don't understand you reply at all.

[davrous]

Have a look to what we've done in the sandbox tool: http://www.babylonjs.com/sandbox .

Users have to provide .babylon file and textures required.

David

[deni]

Have a look to what we've done in the sandbox tool: http://www.babylonjs.com/sandbox .

Users have to provide .babylon file and textures required.

David

Thanks for the good sample link.

Now I'm viewing the source of it.

I've found that for the same functionality there are such possibilities in BabylonJs: 

var filesInput = new BABYLON.FilesInput( engine, null, canvas, null );filesInput.monitorElementForDragNDrop( canvas );var htmlInput = document.getElementById( 'uploader' );htmlInput.addEventListener( 'change', function( event ) {    filesInput.loadFiles( event );}, false );

I've tried it, but there is some bad stuff. The scene is disposing and inserting the new model into it, if to view the source of the prototype which is mentioned above:

 FilesInput.prototype.reload = function () {     var _this = this;     var that = this;     // If a ".babylon" file has been provided     if (this._sceneFileToLoad) {         if (this._currentScene) {             this._engine.stopRenderLoop();             this._currentScene.dispose();         }     BABYLON.SceneLoader.Load("file:", this._sceneFileToLoad, this._engine, function (newScene) { .....

But I want just to paste a new *.babylon model to the existed scene with already added previously meshes.

Of course, I shall learn the source code more deeply...

But, maybe you have the source code/sample which solves my problem in more easy way?

[deni]

I've tried the next code and it works ( I've tried to load file using readAsDataURL() from the FileReader object ):

    function handleFiles( event ) {        var uploader = event.srcElement || event.currentTarget;        var files = uploader.files;        var reader = new FileReader();        reader.onload = function( event ) {            var result = event.target.result;            BABYLON.SceneLoader.ImportMesh(                null,                event.target.result,                '',                scene,                function( newMeshes, particleSystems, skeletons ) {                    var mesh = newMeshes[ 0 ];                    mesh.position = new BABYLON.Vector3( 0, 0, 0 );                }            );        };        reader.readAsDataURL( files[ 0 ] );    }

The result is:



The building with some blue colors in scene ( it's texture, ugly, but it doesn't make sense right now ).

Also there is an error in console:

GET data:;base64,eyJhdXRvQ2xlYXIiOnRydWUsImNsZWFyQ29sb3IiOlswLDAsMF0sImFtYmllbn…iI6WzEsMSwxXX1dLA0KInNoYWRvd0dlbmVyYXRvcnMiOltdfQ==.manifest?1441026249629 net::ERR_INVALID_URL

We can see, that BJS is also trying to fetch a *.manifest file.

So, the problem is rather solved, but guys how can I disable tries to load the *.manifest files in BJS runtime?

[davrous]

To avoid loading everytime the .manifest file (used for offline or to avoid loading the scene from the web server everytime), set the following boolean to false:

 

engine.enableOfflineSupport = false;

[deni]

To avoid loading everytime the .manifest file (used for offline or to avoid loading the scene from the web server everytime), set the following boolean to false:

 

engine.enableOfflineSupport = false;

Thanks