STLLoader in Vue.js Error

Hi all,

I have been trying to implement Three.js in Vue.js and i have been able to create a scene where i am capable to create a bunch of cubes with no problem. All that works as it should. My main issue is within the STLLoader, as im in need to load an STL Object into the scene.

I´m using npm libraries (‘three’ for the basic features such as scene, light, orbitcontrols…). But for Loaders i have used the following npm libraries:

  • ‘three-full’: This library ends up with no errors (aparently) when loading the STL Object but it does not appear in the scene.
  • ‘three-stl-loader’: This library does its job to load the STL Object as it enters the loop to read the faces and vertices of the object before loading, but the loop ends up at face 20, vertice 2 with the error “Uncaught RangeError: Offset is outside the bounds of the DataView”

The STL Objects i am trying to load were being loaded before with three.js in a local HTML page, now im moving it to Vue.js and I have tryed I think everything I could.

Any help will be really appreciated in order to load an STL Object into Vue.js using Three.

Thank you very much.


Can you please share the STL file in this thread?

Yes, here you have it :slightly_smiling_face:

head.stl (3.5 MB)

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?