STLLoader in Vue.js Error

I can load your file without the mentioned error with the latest version of STLLoader.

I suggest you stop using unofficial npm packages like three-full and three-stl-loader and use the official modules from the three npm package instead. As mentioned in the following guide (section Importable Examples) all frequently used classes from the examples directory are available as ES6 modules.

Also related: Many new modules with three.js R105

how did you manage to load the file? Because i have used the ‘three’ npm package but did not manage it to work, can you provide an example code? Just to make sure i´m not doing anything wrong.

Thank you very much for all the help :slight_smile:

I just replaced one of the files in the official STL example:

Hi again, I have been trying to use the ‘three’ npm package as you told me to do, but I keep getting an error that THREE.STLLoader is not a constructor. Taking a look to the files in the three package, i cannot see the STLLoader.js file inside the loader directory in three.

This is the official three npm package right?

Yes it is. The module is located here:

You can import it like so:

import { STLLoader } from 'three/examples/jsm/loaders/STLLoader.js';

I have tried importing it as you say, it looks like it works (with breakpoints i can see it enters the STLLoader.js) but it returns an error:

The way i do it is:
import { STLLoader } from 'three/examples/js/loaders/STLLoader.js'

and then call it as:

var loader = new STLLoader();

Is this correct or I am missing something?

Ok, so right know i manage to clean the error by downloading it again and right now is not giving me any errors.

But the head is not loading on the scene, i have put a breakpoint inside the call function for the loader.load and it never enters in this function.

I will continue investigating this, if you can guess why this could be happening please tell me and I will give it a go.

Thanks for all the help :slight_smile:

Ok, so getting inside the STLLoader.js and putting some breakpoints, I have managed to see where it goes off. So in the following lines from STLLoader.js:

for ( var face = 0; face < faces; face ++ ) {

				var start = dataOffset + face * faceLength;
				var normalX = reader.getFloat32( start, true );
				var normalY = reader.getFloat32( start + 4, true );
				var normalZ = reader.getFloat32( start + 8, true );

				if ( hasColors ) {

					var packedColor = reader.getUint16( start + 48, true );

					if ( ( packedColor & 0x8000 ) === 0 ) {

						// facet has its own unique color

						r = ( packedColor & 0x1F ) / 31;
						g = ( ( packedColor >> 5 ) & 0x1F ) / 31;
						b = ( ( packedColor >> 10 ) & 0x1F ) / 31;

					} else {

						r = defaultR;
						g = defaultG;
						b = defaultB;



				for ( var i = 1; i <= 3; i ++ ) {

					var vertexstart = start + i * 12;

					vertices.push( reader.getFloat32( vertexstart, true ) );
					vertices.push( reader.getFloat32( vertexstart + 4, true ) );
					vertices.push( reader.getFloat32( vertexstart + 8, true ) );

					normals.push( normalX, normalY, normalZ );

					if ( hasColors ) {

						colors.push( r, g, b );




It gets to work and start doing both loops (faces and vertices) but it stops and quits (without any warnings or errors or anything it just finish) on face 20 (the list is more larger than 20) and vertice 2 (when is 3 vertices per face).

Why can this be happening?

Thanks for all the help you can provide :slight_smile:


You use the wrong path to STLLoader. The module version of the loader is in the jsm directory (not js).

import { STLLoader } from 'three/examples/jsm/loaders/STLLoader.js'

Not sure so far. I’m currently not into the STL standard so this might take a while until I can provide feedback.

Yes, the path for the github repository is three/examples/jsm/loaders/STLLoader.js

But the path from the npm package is three/example/js/loaders/STLLoader.js

Anyways, the last updates I have given is using the path from the github repository and it still does not get to work. It is like during the process to read the STL file it breaks. But it does not give any error back.

Will keep tracking this, if you have any news or there is anything I could try that you can think of, please tell me.

Thanks for all the help you already provided :slight_smile:

I don’t think this is correct if you want to use the ES6 module version.

So I managed to see the error that is happening when getting on the faces loop at face 20 vertice 2, I am getting the following error (not showing on console):

Offset is outside the bounds of the DataView


Um,I have not problems on macOS and Chrome/Firefox/Safari:

What OS are you using?

Im using Windows and Chrome.

Despite of the OS, on client side I was able to load the STL file with no problems, the errors have come when putting the Vue framework and trying to load the STL file from server side. I know that the file has no problems at all as I have been able to load it, but the problem is that changing to Vue it stopped working, and is not that Vue and Three are incompatible, because the Scene, Renderer, Lights, etc. are being loaded in a proper way.

Creating a Vue instance, putting the code needed to load the STL file and running npm run dev to start the server, and the STL file does not load, STLLoader.js stops at face 20, vertice 2 with the error I put before.

I’m not familiar with Vue but have you tried the mentioned solution from the github issue?

Not sure if you are still stuck on this, but I have run into the same issue. The problem is in how the file is being loaded. With Vue (or React for that matter) you will need to import the STL model as a Static file.

import demo from ‘…/models/demo.stl’;

1 Like

Hey @themanmaran, thanks for your post.

I think I’ve hit the same problem in Vue. Do you have any more code as an example of how you got this working? When I use your code snippet it looks for the stl file in the modules folder. How did you get around that?

@royksoft if this is just an issue properly loading static assets in Vue, you can check out this issue, it should get you on the right track Loading GLTF models in Nuxt.js / Vue.js