\( \newcommand{\vecIII}[3]{\left[\begin{array}{c} #1\\#2\\#3 \end{array}\right]} \newcommand{\vecIV}[4]{\left[\begin{array}{c} #1\\#2\\#3\\#4 \end{array}\right]} \newcommand{\Choose}[2]{ { { #1 }\choose{ #2 } } } \newcommand{\vecII}[2]{\left[\begin{array}{c} #1\\#2 \end{array}\right]} \newcommand{\vecIII}[3]{\left[\begin{array}{c} #1\\#2\\#3 \end{array}\right]} \newcommand{\vecIV}[4]{\left[\begin{array}{c} #1\\#2\\#3\\#4 \end{array}\right]} \newcommand{\matIIxII}[4]{\left[ \begin{array}{cc} #1 & #2 \\ #3 & #4 \end{array}\right]} \newcommand{\matIIIxIII}[9]{\left[ \begin{array}{ccc} #1 & #2 & #3 \\ #4 & #5 & #6 \\ #7 & #8 & #9 \end{array}\right]} \)

CS307: Lathe, Extrude & Tube Geometries

Plan

  • Kinds of geometry: lathe, extrude, tube
  • Exercise: create your own object with a lathe geometry
  • Demo: lathe geometry with a Bezier curve
  • Demos: extrusion, tubes
  • Katherine Kjeer's THREE.TubeRadialGeometry
  • Exercise on tube geometries: Gateway Arch, sheep horn, Swiss horn

Kinds of Geometry

  • lathe has the Y axis as the spine, a curve on the surface, and a spin around Y.
  • extrude has a shape in the XY plane and the Z axis is the axis of the extrusion.
  • tube has a circular cross-section and an arbitrary curve for the spine.
  • Katherine Kjeer's code and latest Three.js version has tubes with varying radius.

Lathe Geometry

This is very useful. Let's explore the following example that uses a THREE.LatheGeometry:

lathe starter file

Exercise: create your own object with a lathe geometry

From this lathe starter file, try to draw something interesting. If you're feeling uninspired, try a balloon or a traffic cone.

Lathe Geometries from Bezier Curves

The following example makes a Lathe geometry from our S curve that was created as a Bezier curve:

lathe_s_curve.html

The following example creates a coke bottle using a silhouette that combines three Bezier curves:

coke-better.html

Extrusion

Another interesting technique is to create a 2D shape and extrude it along a path defined by a 3D curve (by default, the Z axis). Dirksen has a nice example.

Also see the Three.js documentation: ExtrudeGeometry (not a great example)

Tubes

A nice technique is like extrusion along a curve, with circular cross-sections. See the Three.js documentation: TubeGeometry.

Katherine Kjeer's THREE.TubeRadialGeometry

Katherine Kjeer decided that tubes should allow variable radii, so she built it in Three.js.

See tubeDemo.html

Note that you can have as many radii as you want; Katherine just chose 4 as an example.

Exercise: tube geometry

Using this tube-start.html code file as a starting point, and these images as inspiration, create an object using Katherine's THREE.TubeRadialGeometry.

gateway arch sheep swiss

Here are some sample solutions: arch.html, horn.html, swissHorn.html