Front side plannerizer

This was another small project, which brought back my memory of three.js. The concept is to take three views of a 3D object, and to use those to construct a 3D object from them. It sounds a bit counterintuitive, but should make sense in a moment.

I already prototyped this in python, so I mostly just built a nice interface for it in HTML.

The way I did the prototype was by having three 2D arrays (boolean) as the views, and then to determine if a cube was there then we apply an and operator to the specific coordinates of all three arrays. If it returns true, then the block is filled in. Unfortunately, this can cause some data loss. For example, if you take the following example:

Impossible cube?!

… you can see that despite the fact that this could never occur, the site can’t tell that this is illegal. This is because some shapes will have complicated faces that require this. See below:

Happy on one side 🙂 …
Sad on the other 🙁

When making the HTML version, I used three.js to render the output of the solver, an CSS to arrange some divs in a cube formation. I learnt about the transition property for CSS, which is really quite incredible. All you have to do is tell it what to animate (e.g. position from left), and how much time to do it over, and it does it automatically, no keyframes required.

To top it off, I added a quick how-to guide.

View project

Leave a Reply

Your email address will not be published.