Skip to content

Extrude 3D shapes from SVG paths, create mesh intersections and animate by replacing meshes in the group

Notifications You must be signed in to change notification settings

siberex/Monotaur

Repository files navigation

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

About

Extrude 3D shapes from SVG paths, create mesh intersections and animate by replacing meshes in the group

Topics

Resources

Stars

Watchers

Forks