Hand-printing a 3d bunny | part 3

three.js visuals, tracing, cutting, and gluing

For best results, read part one and part two first!

the Stanford bunny, as rendered using three.js’s default WebGL renderer

A search for a new visualization tool

As it turns out, although Autodesk Maya’s python and MEL API worked fine for early visualization, it didn’t quite offer the kind of flexibility I wanted for the tracing part, for the following reasons:

1. If I wanted to change the bunny’s size or the slice thickness or the number of slices, I’d have to start with a fresh file, run a script, do some manual parts that didn’t have an easily-discoverable API counterpart, run some more scripts, and then I’d have my new bunny. I wanted to have a solution where I could configure some parameters, press a button, and get my bunny in a jiffy.
2. Maya takes a while to start up. And it’s kinda limiting to have to install Maya on every computer I want to use.
3. Toggling on and off layers all the time for tracing was getting annoying. I could theoretically write something to automatically show/hide layers as if I were scrolling through keyframes, where each bunny layer is a frame, but this would involve key-framing a bunch of visibility params, and I wanted a way that didn’t involve animating layers appearing and disappearing.

three.js

Making a simple web app in three.js to accommodate my needs seemed appealing. It addressed my earlier three concerns:

1. Since three.js’s source code is all out there, I could write an all-code solution that would deliver my bunny slices to me in one step through the entire pipeline that would eliminate the need for manual clicking and script toggling.
2. three.js is by no means a light-weight library, but it is by all means much much faster than Autodesk Maya, which loads in tons of plugins I don’t even need (muscle deformation, rigging, and fluid simulations). It also runs right in the browser, so it’s infinitely portable.
3. three.js has easy ways to hide and reveal objects in code by removing or adding them to the scene, which makes layer management go a lot more smoothly. I could also easily bind these functions using my existing front-end skills to a UI without needing to learn anything new.

Developing the three.js web app

One of the reasons I went with three.js over another framework such as babylon was because I really liked the kinds of examples three.js had on their website. Most of the examples I was able to modify and combine to get my first working prototype, which was an OBJ loader with camera controls.

Getting the bunny slices

To get to the point where I got with the Maya solution, I implemented the following in JS:

• insert a bunch of planes into the scene

• for each plane, find the intersection of the plane and the mesh and write to a bunch of line segments

• for all line segments formed from a plane, find segments that form closed loops and ignore others (my solution does not handle cavities in a mesh)

• for each closed loop, create a shape and extrude it by the slice height, which could be changed easily

Creating a tracing interface

I wanted to minimize my time measuring slices and toggling on/off bunny layers, so I did the following to the web app:

1. fix perspective camera at a top-down view and minimize perspective distortion by aligning the camera to the center of the bunny, as determined by its bounding box (orthographic camera was too much of a hassle)
2. create a marked grid that displays on the same plane as the current active layer, for use in keeping measurements from the digital to physical world sane (I’d make sure that a square on the grid corresponded to an inch in real life)
3. have previous and next buttons for the layers, hiding the last shown layer and rendering the new active layer, like a basic onion skinning tool

a look at my web app as I click through the bunny layers

The code

My currently messy and unoptimized code (like, really unoptimized) can be found on this Gist.

The trace, cut, glue

With this tool in place, tracing the bunny by pressing the sheet of thin foam against my screen and outlining it turned out to be quite the simple affair.

After about an hour of tracing, an hour of cutting, and two hours of gluing, I’m pleased to show the final result!

What’s next

I still have a ton of foam, and I have enough of the really thin foam (1/16") that I’d like to spend on making a slightly bigger bunny. Having two bunnies could be nice so I could have one on both my work desk and my home desk. As for the other thicker foam sheets, I’m interested in creating bunnies of different resolutions like the ones shown below!