三维动态字体
Kinetic Typography with Three.js,Mario Carrillo (Codrops),2020 年

正在布展…
它是怎么做的
- 第 1 步用 bmfont 文字几何把单词渲染到 RenderTarget
- 第 2 步该纹理通过 UV 重复(fract)平铺到环面、球体等几何体
- 第 3 步片元着色器里随时间偏移 UV 实现文字滚动
- 第 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.


