I recently gained access to a high quality 3D printer and thought it would be great to print out miniatures for a Pathfinder game. I went to a site (which will remain unnamed) to build my crossbow wielding Half-Elf Summoning Cleric to life. I've used their service before, but I paid them to print out the model. This time, I wanted to export the model so I could print it myself.
After searching through the site, they did not offer a way to download the 3D object. I even asked if I could pay them for the model, but alas they denied my request. In response, I figured that I could write some JavaScript to export the model myself, how hard could it be right?
Stitching Screenshots - My initial idea was to write scripts to
- Take a screenshot of the HTML5 canvas
- Rotate the model
- Repeat steps above until entire model had images
- Send images to a tool that can stitch them together to create a 3D .STL file
JavaScript 3D Canvas Libraries - It was at this point I began digging through the JavaScript. First, they were using the HTML5 canvas with a WebGL context. Most people who've experimented (myself included) with the HTML5 canvas just set the context to 2D. I thought they might have built their own framework for rendering 3D models on their own, hence the reason I couldn't just pay to get the exported file. Turns out they are using a common library called threejs to generate their models on the canvas
Three JS & Minified Code - I looked through different ways to access the 3D rendered model, and after looking through documentation, I needed access to the THREEJS SCENE object. This led me to read through a bunch of minified JavaScript on their webpage (hooray). Once I found the SCENE, I grabbed a script from a forum that attempted to export the SCENE objects to an .STL file
The Cube - After opening the file, there was good news and bad news. Good news, something showed up! Bad news, it's just a 1x1x1 cube...not really of much help. After looking through the objects on the SCENE, I noticed there was an object for the background "environment" (Up to this point, I barely noticed the background mountain landscape). I went in and removed this object from the SCENE and exported one more time...
T-Pose - Once again, I imported the new .STL file and... THERE IT IS! Just a few problems:
- Model is laying down on it's side. No big deal as I can rotate around the z-axis.
- Model is extremely small. Also not a big deal since I can scale the model
- Model is not keeping its pose, it's stuck in a T-Pose (including weapons). That's a problem.
Skeleton & Bones - After some research, it looks like THREEJS Geometry objects can attach themselves to Bones and a Skeleton. Think about it, if you want to manipulate a bunch of Objects on a Half-Elf (armor, weapons, etc.) it would be easy to manage if everything was attached to a single Skeleton. Updating this Skeleton would in turn, update the position of the Geometries attached to it. With all that in mind, I found a way to get the position/rotation matrix and calculated the real position of each Geometry object in reference to the Skeleton (yay Linear Algebra).
One final export later, and the full model came into view... I can't express how pumped I was at 2 AM! Overall, this hack was a two night affair that was an AMAZING challenge! For now, I'm keeping this JavaScript hack within a close group of people so the site we're using this against doesn't believe it's for anything other than personal use.
Best,
nv