Load Files locally

Hello guys, I am a new user but would like to suggest the use of FileReader API (http://blog.teamtreehouse.com/reading-files-using-the-html5-filereader-api) to upload files (OBJ, STL…) in Three.js loaders.

FileReader API enable the user to upload files locally too. I inserted this script in my STLLoader.js

THREE.STLLoader.prototype.load2 = function(files, callback) {

    var scope = this;
    var file = files.files[0];

    var reader = new FileReader();

    reader.onload = function(event) {
        if (event.target.readyState === 2 || event.target.status === 0) {

            var geometry = scope.parse(event.target.result || event.target.responseText);

            scope.dispatchEvent({type: 'load', content: geometry});

            if (callback)
                callback(geometry);

        } else {

            scope.dispatchEvent({type: 'error', message: 'Couldn\'t load URL [' + url + ']', response: event.target.readyState});

        }
    };

    reader.readAsArrayBuffer(file);

};

Author: Fantashit

1 thought on “Load Files locally

  1. Imagine that you need to load a STL file but you don’t have the localhost server. FileReader API allows the user do this and XMLHttpRequest() does not support.

    Example

    HTML:

    <input type="file" class="filestyle" data-icon="false" id="stl" onchange="start(this)" >

    JS

    function start(file){           
            init();
            loadSTL(file)
            animate();          
    }
    
    function loadSTL(file){
    
            loader = new THREE.STLLoader();
            loader.addEventListener('load', function(event) {
                    var geometry = event.content
                    var material = new THREE.MeshPhongMaterial({ambient: 0xff5533, color: 0xff5533, specular: 0x111111, shininess: 200});
                    var mesh = new THREE.Mesh(geometry, material);                  
                    mesh.castShadow = true;
                    mesh.receiveShadow = true;                  
                    scene.add(mesh);                    
            });
            loader.load2(file);
    
    }

    STLLoader.js

    THREE.STLLoader.prototype.load2 = function(files, callback) {
    
        var scope = this;
        var file = files.files[0];
    
        var reader = new FileReader();
    
        reader.onload = function(event) {
            if (event.target.readyState === 2 || event.target.status === 0) {
                var geometry = scope.parse(event.target.result || event.target.responseText);
                scope.dispatchEvent({type: 'load', content: geometry});     
    
                if (callback)
                    callback(geometry);
    
            } else {
    
                scope.dispatchEvent({type: 'error', message: 'Couldn\'t load URL [' + url + ']', response: event.target.readyState});
    
            }
        };
    
        reader.readAsArrayBuffer(file);
    
    };

    If you want to know more about File Reader API, look:
    http://blog.teamtreehouse.com/reading-files-using-the-html5-filereader-api

Comments are closed.