STLloader/THREE.js error: "Uncaught RangeError: offset is outside the bounds of the DataView"

Question

I want to code a little viewer of stl files in javascript so for this a use the library three.js with the module STLLoader, for this viewer i use a system of upload make with an API in node.js (I send files by using fetch request and on backside formidable save files ) and for the viwer the page make a request on a adress with fetch and get the stl file content, now for load stl data I use this code :

var contents = stl_name;

var geometry = new THREE.STLLoader().parse( contents );
geometry.sourceType = "stl";

var mesh = new THREE.Mesh( geometry, material );
mesh.rotation.x = 5;
mesh.rotation.z = .25;
scene.add( mesh );

but it's return an error (i have this error just with stl binary files, the ASCII stl files works correctly) : "Uncaught RangeError: offset is outside the bounds of the DataView", I don't how sold it, thank you in advance.

An exemple of test files : test.stl

Answer 1

I finally solved my problem by adding node.js library in my API (stl) convert binary stl to ASCII stl. link to the library

Answer 2

I can succesfully import the asset into the three.js editor via drag'n'drop. So it seems there is a problem in your app OR you are not using the latest version of three.js.

In any event, try to use a similar code like in the editor. It is essentially this:

const reader = new FileReader();

reader.addEventListener( 'load', function ( event ) {

    const contents = event.target.result;

    const geometry = new THREE.STLLoader().parse( contents );
    const material = new THREE.MeshStandardMaterial();

    const mesh = new THREE.Mesh( geometry, material );
    mesh.name = filename;

    scene.add( mesh );

}, false );

reader.readAsArrayBuffer( file );