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

Question

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 works
BABYLON.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?

score 0 · Accepted Answer · answered Aug 31 '15 at 13:13

The problem is solved here:

http://www.html5gamedevs.com/topic/16846-how-to-load-babylon-exported-from-blender-using-javascriptfileapixhr/

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 ] );
}

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

1 Answers1