Category
Visual Design
Interaction Design
Software Engineering

Published
Aug 26, 2018

Read
2 min

Tweet
Share
Comment

Interactive Drop Caps with THREE.js

Intro

In working on my book Coding for Designers - Demystifying Code and Learning JavaScript recently, I added a 2D drop cap (stylized first character of a body of text) to each chapter.

The purpose of this was to intentionally add a bit of visual uniqueness and style as the target audience is likely to appreciate small details like this. It dawned on me that it'd be really cool to have a very subtle interactive drop cap that was 3D instead of 2D. This idea naturally led me to THREE.js, a 3D JavaScript library.

Interactive Drop Cap in Action

3D Text

As I'm familiar with 3D modeling, animation, and programming from my 3DS Max, Papervision3D, and Unity experience, I assumed THREE.js would allow me to pull off what I envisioned with ease. I was right.

Instantly I found what I needed.

THREE.js Example Text

Upon some continued digging, I found two useful code examples that were going to allow me to jump start toward my ideal solution. Here they are:

From there it was simply a matter of iteration before I had exactly what I wanted. I did run into one rendering issue however and I want to thank @thespite as he helped me through the rendering issue insanely quickly.

On mobile, I leave the 2D drop cap in place as the interaction and rendering of the 3D text on mobile is lacking (anti-aliasing looks poor). For those curious, below is the codepen so you can see the code and interact with the base implementation. You can see and interact with the final implementation on the Coding for Designers - Demystifying Code and Learning JavaScript book site.

Coding for Designers Book 3D Drop Cap Codepen