跳到正文
网页珍奇柜Web Curio

三维动态字体

Kinetic Typography with Three.js,Mario Carrillo (Codrops),2020 年

正在布展…

本柜的现场复刻:按原作的技术思路从零编写,不含原作的代码和素材。原作请点上方「去看原作」。

它是怎么做的

  1. 第 1 步用 bmfont 文字几何把单词渲染到 RenderTarget
  2. 第 2 步该纹理通过 UV 重复(fract)平铺到环面、球体等几何体
  3. 第 3 步片元着色器里随时间偏移 UV 实现文字滚动
  4. 第 4 步顶点着色器加入扭转/噪声形变,配合阴影渐变

复刻配方

一段技术配方,可以直接交给 AI 编程助手,也可以自己照着写。想指定技术栈、位置和性能预算,就把它加入实现方案。

Render a word into a WebGLRenderTarget using a bitmap-font or canvas text, giving you a texture of the typography. Map it onto a torus knot, sphere or twisted plane, multiplying UVs by a repeat factor and wrapping with fract() so the word tiles around the shape. Offset the UVs over time to scroll the text and apply a vertex twist that rotates positions around an axis by an angle proportional to height. Darken faces facing away from the camera to fake depth.

档案

能不能拿来用

原作以 MIT 许可开源:可以阅读源码学习,按许可证条款使用;在自己的项目里引用时保留原作者署名。

性能开销

视觉强度

实现难度

尺度为策展判断(1 到 5),用于比较和推荐。

核实记录:Repo has MIT licence and links to the Codrops article; tympanus.net returns 403 to automated fetch so demo not visually confirmed.