Get the full demo: jsstl on Github
Recently Github announced that they were integrating a web-based STL viewer into their interface. The STL file format has become very well known as of late do to the growing popularity of 3D printing among makers. STL is the format of choice for most 3D printing devices and is as such the format used by almost all accompanying software. So whether you want to print, manage STL files, or convert them to some other format, you need to get to know them well.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45
It’s not dumb luck that I chose to use this terrific library, I’ve used it before. Over a year ago I used three.js and Titanium to create an experimental 3D demonstration across multiple mobile devices using socket communication in realtime. Instead of trying to explain it all, you can check out the screencast I did regarding it below. This is part 3 of a 3 part series. Click here to check out the previous parts.
So needless to say I was already primed to use it again. In the STL viewer I would be using it to render the 3D triangle information from the STL files into faces of a mesh. This turned out to be pretty easy with three.js. The snippet below shows how I took the data I read from the STL in the Binary Parsing section above and then used it to render a series of triangles that would compose a mesh of the STL object.
1 2 3 4 5 6 7 8 9 10 11
And that’s it. The hard part was done creating that
geo object. We now have the
mesh object to which we can add to a prepared three.js scene. For the full code, check the repo.
- It was too unusual and cool to pass up.
- It had both the ascii and binary format available.
- It’s composed of almost 38,000 triangles. I wanted to see how well a web-based 3D renderer could handle a complex model.
So without further ado, here’s the end result, provided your browser supports it. Feel free to use, bend, mold, and/or steal this code as you like. A digital high five would be nice, but is not required.