One of my main objectives is to import private STL files using three.js from a secure Laravel 8 storage directory.
Unfortunately, the traditional method of using the .load function from STLLoader.js does not work in this scenario:
const loader = new THREE.STLLoader();
const material = new THREE.MeshPhongMaterial({ color: 0x888888, specular: 0x111111, shininess: 2 });
loader.load( '../storage/app/private/file.stl', function ( geometry ) {
const mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
});
This approach fails because the file path needs to point to the private storage outside the web-root folder, causing it to be inaccessible.
To overcome this challenge, I have adopted a new strategy involving an Ajax post request to an STLController where I utilize the get method for retrieving file contents from Laravel in the following manner:
return Storage::get('private/file.stl');
This method allows me to use the response data with the .parse function from STLLoader.js in conjunction with three.js.
const loader = new THREE.STLLoader();
const material = new THREE.MeshPhongMaterial({ color: 0x888888, specular: 0x111111, shininess: 2 });
$.ajax({
type:'POST',
url: "get_stl_file_contents",
success: function(data) {
geometry = loader.parse(data);
mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
},
});
This technique works seamlessly for ASCII-formatted STL files. However, when dealing with binary format, I consistently encounter the same ERROR message:
[ERROR] RangeError: Out of bounds access - (getFloat32)
To proceed, I require a method to convert binary response data to ASCII for current usage or find an alternative approach to load/parse STL files for three.js directly from raw binary content.
I appreciate any assistance and guidance! 🤗