How to Open STL Files in three.js

Import STL into three.js, step by step

1. 1Check the fileFind out what units the part was designed in. Almost every printable STL is in millimetres, but the file itself doesn't say.
2. 2Import into three.jsSTLLoader, which returns a BufferGeometry.
3. 3Check scale and orientationthree.js works in unitless (most scenes treat 1 unit as 1 metre) and is Y-up. STL files are unitless (slicers assume millimetres), so the size depends on what the exporter assumed.
4. 4Check materials and animationSTL carries no colour or materials, and no animation. Look at the model under a neutral light before you build on it.

What comes through

Things to watch for

• STL has no materials, so wrap the geometry in a Mesh with your own material, and rotate it from Z-up to Y-up.
• Compress big models with Draco or Meshopt and load them with the matching decoder; it can cut download size several times over.

Questions

Does three.js support STL files?

Yes. three.js opens STL files as shipped: STLLoader, which returns a BufferGeometry.

Why is my STL model the wrong size in three.js?

STL files are unitless (slicers assume millimetres), while three.js works in unitless (most scenes treat 1 unit as 1 metre). Compress big models with Draco or Meshopt and load them with the matching decoder; it can cut download size several times over.

What is the best 3D format for three.js?

GLB and FBX are the most reliable choice for three.js. If you have a choice when exporting, pick GLB over STL.

Menu names follow the three.js open-source project's current release. Check the official three.js documentation if your version differs.