export mesh as .STL file?

[rawwerks]

i'm sure this is super easy with GLTF-transform, but i'm not smart enough to figure it out. (and the AI that i just trained on https://gltf-transform.dev/ isn't smart enough to do it either ;) )

[rawwerks]

i guess i could pass the mesh to https://threejs.org/docs/#examples/en/exporters/STLExporter ?

does this look right? (written by https://cursor.sh )

import { NodeIO } from '@gltf-transform/core';
import { BufferGeometry, Mesh, MeshStandardMaterial } from 'three';
import { STLExporter } from 'three/examples/jsm/exporters/STLExporter.js';

// Load the glTF file
const io = new NodeIO();
const document = await io.read('path/to/model.glb');

// Get the first mesh from the glTF file
const gltfMesh = document.getRoot().listMeshes()[0];

// Convert the glTF mesh to a three.js mesh
const geometry = new BufferGeometry();
const material = new MeshStandardMaterial();
const threeMesh = new Mesh(geometry, material);

// TODO: You'll need to fill in the geometry and material details here,
// based on the data in the gltfMesh. This will likely involve iterating
// over the gltfMesh's primitives and converting them to BufferGeometry.

// Instantiate an exporter
const exporter = new STLExporter();

// Configure export options
const options = { binary: true };

// Parse the input and generate the STL encoded output
const result = exporter.parse(threeMesh, options);

[donmccurdy]

glTF Transform doesn't read or write any other formats, but you could use it to obtain the vertex positions and normals you'd need to serialize an STL file with other libraries. I used stl for this example, but you could do the same with three.js by constructing BufferGeometries.

import { NodeIO } from '@gltf-transform/core';
import { KHRONOS_EXTENSIONS } from '@gltf-transform/extensions';
import { normals, unweld } from '@gltf-transform/functions';
import stl from 'stl';
import { writeFile } from 'node:fs/promises';

const io = new NodeIO().registerExtensions(KHRONOS_EXTENSIONS);
const document = await io.read('./assets/input.glb');
await document.transform(normals({ overwrite: true }), unweld());

let nextIndex = 1;
for (const mesh of document.getRoot().listMeshes()) {
	const name = mesh.getName() || `Mesh_${nextIndex++}`;
	const object = { description: name, facets: [] };

	for (const prim of mesh.listPrimitives()) {

		const position = prim.getAttribute('POSITION');
		const normal = prim.getAttribute('NORMAL');

		for (let i = 0, il = position.getCount(); i < il; i += 3) {
			object.facets.push({
				normal: normal.getElement(i, []),
				verts: [
					position.getElement(i, []),
					position.getElement(i + 1, []),
					position.getElement(i + 2, []),
				],
			});
		}

	}

	await writeFile(`./assets/${name}.stl`, stl.fromObject(object, /* binary */ false));
}

Note that if you're trying to turn the entire GLB file into a single STL, rather than exporting meshes individually, you'll also need to consider the node transforms at which the meshes are instantiated.

[rawwerks]

@donmccurdy any tips on getting the file part working w/ svelte?

i'm trying to use Svelte "Files":

let modelFileSTL: { current: File | null } = { current: null };

i've got this at the end of your code (because writeFile() is not allowed in svelte)

modelFileSTL = stl.fromObject(object, /* binary */ false);
console.log(getFileExtension(modelFileSTL.current.name));

which returns the error TypeError: modelFileSTL.current is undefined

[donmccurdy]

The tricky thing with Svelte (particularly SvelteKit...) is that your code could run either serverside (SSR) or clientside (web). Some bundlers/build tools might generate code compatible with one environment or the other, and I'm not sure what environment the stl package is intended for, probably Node.js.

So it's a big question – depends on your framework and bundler, might be easier to answer for someone in the Svelte Discord if they have full context to repro the problem. I'm confident that glTF Transform itself is fully compatible with both clientside and serverside environments (as long as you use NodeIO or WebIO appropriately), let me know if not!

[rawwerks]

in case it is useful to the next person with a similar issue, i could not get stl to work with my sveltekit app, so i just copied the necessary functions directly and combined with @donmccurdy 's code above. i only tested binary:false, and this only works on the first mesh of the .glb. i will leave the rest as an exercise to the next reader ;)

but it works! and is live at https://ar.polyspectra.com, which can now view .glb files in AR, but if you want to print them, the mesh is exported to .stl before sending to our part quoting tool (via the 'make it real' button).

function stlFromObject(obj, binary) {

		if (!binary) {
		var str = [
			'solid ' + obj.description.trim()
		];

		var fl = obj.facets.length;

		for (var j = 0; j<fl; j++) {
			var facet = obj.facets[j];
			var n = facet.normal || computeNormal(facet);

			str.push('  facet normal ' + [
			exp(n[0]), exp(n[1]), exp(n[2])
			].join(' '));

			str.push('    outer loop');
			var v = facet.verts;

			var p = '      vertex ';
			str.push(p + [exp(v[0][0]), exp(v[0][1]), exp(v[0][2])].join(' '));
			str.push(p + [exp(v[1][0]), exp(v[1][1]), exp(v[1][2])].join(' '));
			str.push(p + [exp(v[2][0]), exp(v[2][1]), exp(v[2][2])].join(' '));

			str.push('    endloop');
			str.push('  endfacet');
		}

		str.push('endsolid');
		return str.join('\n');
		} else {

		var count = obj.facets.length;

		var ret = new Buffer(84 +  count*12*4 + count*2);
		ret.fill(0, 0, 80);
		ret.write(obj.description || '');
		ret.writeUInt32LE(count, 80);

		var offset = 84;

		var write = function(val) {
			ret.writeFloatLE(val, offset);
			offset+=4;
		};

		var facetCount = obj.facets.length;
		for (var j = 0; j<facetCount; j++) {
			var facet = obj.facets[j];
			var n = facet.normal || computeNormal(facet);

			write(n[0]);
			write(n[1]);
			write(n[2]);

			var l = facet.verts.length;
			for (var i = 0; i<l; i++) {
			var vert = facet.verts[i];
			write(vert[0]);
			write(vert[1]);
			write(vert[2]);
			}

			ret.writeUInt16LE(facet.attributeByteCount || 0, offset);
			offset+=2;
		}
		return ret;
		}
	}
	function computeNormal(facet) {
		var v = facet.verts;
		return normalize(
			v[0][0], v[0][1], v[0][2],
			v[1][0], v[1][1], v[1][2],
			v[2][0], v[2][1], v[2][2]
		);
	}
	function exp(a) {
		return a.toExponential();
	}
	function writeArrayFromGLTF(model: Document){
		const mesh = model.getRoot().listMeshes()[0];
		const name = mesh.getName();
		const object = { description: name, facets: [] };

		for (const prim of mesh.listPrimitives()) {

			const position = prim.getAttribute('POSITION');
			const normal = prim.getAttribute('NORMAL');

			for (let i = 0, il = position.getCount(); i < il; i += 3) {
				object.facets.push({
					normal: normal.getElement(i, []),
					verts: [
						position.getElement(i, []),
						position.getElement(i + 1, []),
						position.getElement(i + 2, []),
					],
				});
			}

		}
		return object;
	}

[rawwerks]

@donmccurdy - one last thing that i missed here. GLB uses meters and most STL defaults to millimeters. where would be the best place in the functions above to scale things by 1000?

this look ok?

for (let i = 0, il = position.getCount(); i < il; i += 3) {
  object.facets.push({
	  normal: normal.getElement(i, []),
	  verts: [
		  position.getElement(i, []).map(v => v * 1000),
		  position.getElement(i + 1, []).map(v => v * 1000),
		  position.getElement(i + 2, []).map(v => v * 1000),
	  ],
  });
}

[donmccurdy]

Oh - didn't realize that about STL. Yes, that looks reasonable. You could also scale the whole mesh in one go. Example:

import { fromScaling } from 'gl-matrix/mat4';
import { transformMesh } from '@gltf-transform/functions';

transformMesh(mesh, fromScaling([], [1000, 1000, 1000]));

The result of fromScaling is simple (see below) so you don't actually need gl-matrix here, I just include it in case you want to do more math later. The approach also works if you need to apply a node's transform (node.getWorldMatrix()) to the mesh before export.

const mat = [
  1000, 0, 0, 0,
  0, 1000, 0, 0,
  0, 0, 1000, 0
  0, 0, 0, 1
];

• https://gltf-transform.dev/modules/functions/functions/transformMesh
• https://gltf-transform.dev/modules/functions/functions/transformPrimitive