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.
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.
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.
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.
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).
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.
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):
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.
