I’m trying to simplify an 3D Model (.STL file) that is loaded using STLLoader and the Three.js function SimplifyModifier to reduce vertices and simplify the model.
I have a function called loadMesh that loads the file and return an Three.js mesh that renders on a Scene:
/**
* Method to load the mesh model from .stl or .3mf file and return Mesh ThreeJS object
* @param {*} part Part or model of a part, on form of a .stl or .3mf file
* @param {*} color Color of the mesh material. Default = #0096d6
* @returns Mesh from ThreeJS
*/
static loadMesh(part, color = '#0096d6') {
if (!FileUtil.existsPath(part.path)) return null;
const loader = (Loader, encoding) => new Loader().parse(FileUtil.readFile(part.path, encoding));
let mesh = null;
const material = new THREE.MeshStandardMaterial({ color, flatShading: true });
const ext = FileUtil.getExtName(part.path, true).toLowerCase();
if (ext == 'stl') {
const geometry = loader(STLLoader, 'binary');
// Make an instance of SimplifyModifier
const modifier = new SimplifyModifier();
// Create Mesh wit geometry and material already defined
mesh = new THREE.Mesh(geometry, material);
// Number of vertices to remove from part
const count = Math.floor( mesh.geometry.attributes.position.count * 0.1 );
console.log(count);
// Now modify the geometry of our mesh to optimize number of polygons
mesh.geometry = modifier.modify( mesh.geometry, count );
} else if (ext == '3mf') {
mesh = loader(ThreeMFLoader, 'buffer');
for (const [index, buildItem] of Object.entries(mesh.children)) {
(function updateMaterial(children) {
for (const child of children) {
if (child.children?.length > 0) {
updateMaterial(child.children);
} else {
child.index = String(index);
child.material = material.clone();
}
}
})(buildItem.children);
}
if (part.buildItemIndex != 'all') {
mesh = mesh.children[+part.buildItemIndex];
mesh.position.set(0, 0, 0);
}
}
mesh.part = part;
MeshUtil.resetOrigin(mesh);
return mesh;
}
Currently the app supports two 3d files extensions: .STL and .3MF, that’s why you can use that the function checks the extension and its executes based on that. But for the moment im trying to simplify an STL model, so the important thing here is happening inside the STL if condition:
const geometry = loader(STLLoader, 'binary');
// Make an instance of SimplifyModifier
const modifier = new SimplifyModifier();
// Create Mesh wit geometry and material already defined
mesh = new THREE.Mesh(geometry, material);
// Number of vertices to remove from part
const count = Math.floor( mesh.geometry.attributes.position.count * 0.1 );
//
console.log(count);
// Now modify the geometry of our mesh to optimize number of polygons
mesh.geometry = modifier.modify( mesh.geometry, count );
When I try to render the model on another component using
// mesh is the returned mesh from the above function
scene.add(mesh);
I get the next error on console:
Notes
Already tried to change count of vertices to remove and there is no difference.
For better reference, there are the properties of the geometry object that im trying to simplify:
The purpose of this is because in some cases the app can receive large files and it crashes when trying to render on Scene.
Also, don’t know if there is any problem that is BufferGeometry, and if its the case, how can I solved that?
