The start of the n-Hedral project basically coincides with the start of this blog. I started by first experimenting with a lot of different technologies to find a foothold in the world of web-based customization. Finally, I found my way to WebGL, and began experimenting with it (here, here and here). Once I had determined the form of my project (based on my experiments here), I began developing the framework to design custom furniture based on tetrahedral forms.
The initial prototypes started simply, just building an expandable framework on which the panels would be drawn. This prototype allows you to click on the frame, and create new cells. Click below to view the demo:
The next step was to draw panels for each of the faces of the triangular faces. This involved creating a custom mesh generation algorithm to create each panel and keep track of them in space. The original framework is still there, just invisible. Click below to view the demo:
From here, I was able to design a way to move the vertices of the underlying framework, allowing the panels to be re-sized. The framework can be expanded, as in the previous example, however, now you can move each individual vertex by hovering over it, clicking, and dragging an arrow handle. The arrow handles are done using invisible intersection planes that allow the code to find the intersection points of the mouse in a given direction. Enabling draggability created some difficulties (which can be found here), however, in-depth research into the OrbitControls script allowed me to solve my own problems. Click below to view the demo:
With the basic elements understood, I was able to add functionality. I was able to create draggable sliders using HTML div elements, and then wrote a custom mesh generation algorithm to create new panel shapes and connector pieces. I also enabled saving a picture or 3D model of the design for future use. A flyout window provides instructions to the user, and the wireframe can be turned on and off. Click below to visit the n-Hedral Customizer:
And that’s about 4 months of work in a nutshell! I’m really excited to have been able to achieve such an interactive result in such a short amount of time. All of the tricks I learned through the making of this interface have given me some serious coding skill with which I can move forward and create more customizable products. I’m really excited for the future!Click here to see the next, and final, installment of the n-Hedral – Behind the Scenes series!