Skip to content

Latest commit

 

History

History
44 lines (24 loc) · 1.87 KB

README.md

File metadata and controls

44 lines (24 loc) · 1.87 KB
Raw

Monotaur

Exploration project to check Three.js features and capabilities.

❇️ Codepen Demo

❇️ Random Sequence rotation animation

Meshes rendered with wireframe

How it works

  1. Load SVG shapes (2D).

    2D-shape of digit 1 2D-shape of digit 2

  2. Extrude 3D surfaces from SVG shapes.

    It is like making an I-beam surface from an I shape.

    Or like creating a ring surface from an O shape, which is technically speaking is called extruding annular cylinder from an annulus :-)

    Extruded 3D-shape of the digit 1 Extruded 3D-shape of the digit 2

  3. For each pair of extruded surfaces find their Boolean Intersection.

    One surface is rotated 90-degree against the other before computing intersection.

    Surface intersections are computed using BSP (binary space partitioning), and thankfully there are existing solutions for that:

    Intersection of the extruded shapes 1 and 2 Intersection of the extruded shapes 2 and 3

  4. Resulting surface mesh is animated by rotating around vertical axis.

  5. After completing quarter-circle revolution 3D-mesh is switched to the next one to achieve smooth transition.

animation.mp4