3D Text Bending & UV Mapping

Another back post on updates of some new features added to three.js ExtrudeGeometry a couple of weeks ago.


The 2 most notable changes are
1. 3D Text Bending – This allows text to be bend or wrapped along a spline path. Curve classes shares a common API so straight lines, bezier curves and catmull-rom splines are supported. The initial inspiration for this work came from this neat article http://www.planetclegg.com/projects/WarpingTextToSplines.html

2. UV mapping – Finally, managed to add UV mapping for extrude geometries classes.

3D Text Bending

Curve classes contain methods to get tangents and normal vectors at a point t, and one use case is for path wrapping/bending. CurvePath is now a connected set of curves with the Curve interface/API. It shares the same interfaces with the base Curve class, therefore a bend parameter could take in a curve, an array of curve (curvepath), or a path (for drawing api).

To apply path bending to a shape, use shape.addWrapPath(path). Calling getTranformedPoints() would run transformation on extractAll(Spaced)Points() internally;

[edit] one important key to how path bending works is that the text is transformed according to the tangents of the spline path. I wrote the base curve class to calculate the tangent based on gradient of a tiny difference of t (kinda like using limits to derive differential. While this potentially can calculate the tangent of any generic sub-curve, a sub-curve should overwrite itself to have faster and more accurate differentiation. I should not forget to thank Puay Bing for helping me with the derivative of the cubic bezier spline the other day!

Bend in text example (http://i53.tinypic.com/fyjgz.png)

Bend with spline (http://i55.tinypic.com/2m7vjt3.png)

Bend with connected curves (http://i54.tinypic.com/33u8xa9.png)

Cubic and Quadratic Beziers (http://i51.tinypic.com/30ws1t4.jpg)

UV Mapping
UV mapping applies a texture onto a material to wrapped around the object.

ExtrudeGeometry now takes in material and extrudeMaterial, material for front/back faces, extrudeMaterial for extrusion and beveled faces

Using these 2 gradient textures
textures material

can produce
uv three

with sufficient subdivisions, you can get a smooth looking model..
close up on 20 subdivisons

advice learn from mrdoob to “experiment, experiment, experiment”
experimented and flipped

i think i just fell in love with uv and gradients, until some transparency came
some transparency

Finally for some demos – TextBending & Text LOD’s on Github, UV Mapping at http://jsdo.it/zz85/h5EM and remake of mr.doob’s “Hello” at http://jsdo.it/zz85/hello

The end of the weekends means the end of my code twinkling for the week again. A lot more exciting/crazy stuff to explore and work on, unfortunately good things may have to wait.

At least I think I have a little small checks on my never ending TODO list. (^^)

Signing off geeknotes.

after adding uv mapping, alteredq added smooth shading to the webgl text example. Pretty cool right?