raw Software
Your browser does not support the canvas element.
Preset
Mode
Animation

3D Wire Creator

Robert Eisele

An interactive canvas experiment for constructing and animating simple 3D wireframe models. Preset geometry, graph editing, perspective projection, and quaternion trackball rotation expose the core mechanics without hiding them behind a full modeling interface.

Read the story

The 3D Wire Creator is a small canvas experiment in model editing, perspective projection, and animated spatial rotation. Start with a cube, house, or pyramid, then add vertices, connect them with edges, or remove parts of the model directly in the stage above.

From Model Space to the Canvas

Every vertex remains a three-dimensional point \(p=(x,y,z)\). A unit quaternion \(q\) rotates that point without changing the stored model geometry:

\[ p'=q\,p\,q^{-1}. \]

The rotated coordinates are converted to canvas coordinates with a simple perspective factor. For focal length \(f\), the scale at depth \(z'\) is

\[ s=\frac{f}{f+z'},\qquad X=c_x+s x',\qquad Y=c_y+s y'. \]

This keeps the model data stable while the camera view changes. The pointer-driven virtual trackball supplies the quaternion, and the animation preview composes a small incremental rotation on each frame.

Editing the Graph

The wireframe itself is a graph: vertices hold positions and pairs of vertex indices define edges. Linking two selected points inserts one edge, while deleting a point also removes every incident edge and renumbers the remaining indices. New points are placed on the plane facing the current view, then transformed back into model space so that they continue to rotate with the object.