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.
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.
Any knowledgeable #threejs #webgl folk out there no why this TextGeometry is rendering funky? Codpen is here https://t.co/btKKv5fvzv I swapped out the font w/helvetiker & I had the same issue. Makes me think it's not the geometry atm.
— Derek Knox (@derekknox) August 24, 2018
cc @mrdoob @thespite @LearningThreejs pic.twitter.com/mAYvTqdGcz
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