1

I'm tasked to develop a web app where users upload the STL files generated by matlab code and view them. i'm having problem with passing the parameters in the STL load.

I tried following the answers in this link User uploaded textures in three.js

function readURL(input) {

    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('#blah').html( e.target.result);
            console.log(e.target.result);
            var loader = new THREE.STLLoader();
            loader.load(e.target.result) , function (    geometry ) {
                var material = new THREE.MeshPhongMaterial( { color:   0xff5533, specular: 0x111111, shininess: 200 } );
                var mesh = new THREE.Mesh( geometry, material );
                mesh.position.set( 0, - 0.25, 0.6 );
                mesh.rotation.set( 0, - Math.PI / 2, 0 );
                mesh.scale.set( 0.005, 0.005, 0.005 );
                mesh.castShadow = true;
                mesh.receiveShadow = true;
                scene.add( mesh );
            } );

        }

        reader.readAsDataURL(input.files[0]);
    }
}

$("#imgInp").change(function () {
    readURL(this);
});

I expect the STL model to be rendered.

Mugen87
  • 28,829
  • 4
  • 27
  • 50
smanga khaba
  • 11
  • 3

1 Answers1

1

The STLLoader has a parse function which can take the contents of the file as an Array Buffer and return the processed geometry. You can use FileReader.readAsArrayBuffer to get the contents.

if (input.files && input.files[0]) {
    var reader = new FileReader();
    reader.onload = function (e) {

        var geometry = loader.parse(e.target.result);
        var mesh = new THREE.Mesh( geometry, material );

        // ...

        scene.add(mesh);
    }
    reader.readAsArrayBuffer(input.files[0]);
}

Let me know how that goes!

Garrett Johnson
  • 2,413
  • 9
  • 17
  • i get this error Uncaught TypeError: Cannot read property 'decodeText' of undefined – smanga khaba Jan 09 '19 at 12:03
  • It looks like it's failing with `LoaderUtils` on the line `THREE.LoaderUtils.decodeText( new Uint8Array( buffer ) );`, which should be included with the main THREE.js bundle. Is THREE.js loaded on the page, as well? What version? – Garrett Johnson Jan 09 '19 at 16:23