three.js如何实现3D动态文字效果

前言

大家好，这里是 css 魔法使——alphardex。

之前在逛国外网站的时候，发现有些网站的文字是刻在3d图形上的，并且能在图形上运动，视觉效果相当不错，于是笔者就也想用three.js来尝试复现出这种效果

上图只是所有效果的其中之一，接下来让我们一起开干吧~

准备工作

笔者自行封装的three.js模板：three.js starter

读者可以点击右下角fork一份后再开始本项目

本项目需要用到位图字体，可以直接复制的html里的font字体代码

一个注意点：three-bmfont-text这个库依赖全局的three.js，因此要在js里额外引入一次three.js，如下图

实现思路

1. 加载位图字体文件，将其转化为文字对象所需要的形状和材质
2. 创建文字对象
3. 创建渲染目标，可以理解为canvas中的canvas，因为接下来我们要将文字对象本身当做贴图
4. 创建承载字体的容器，将文字对象作为贴图贴上去
5. 动画

正片

搭好架子

加载和创建字体

首先加载字体文件，并创建出形状和材质，有了这两样就能创建出字体对象了

着色器

顶点着色器

通用模板，直接cv即可

片元着色器

利用fract函数创建重复的贴图，加上位移距离displacement使得贴图能随着时间的增加而动起来，再用clamp函数来根据z轴大小限定阴影的范围，意思是离画面越远则阴影越重，反之离画面越近则阴影越轻

此时文本显示到了屏幕上

创建渲染目标

为了将字体对象本身作为贴图，创建了一个渲染目标

创建字体容器

创建一个容器，并将字体对象本身作为贴图贴上去，再应用动画即可完成

别忘了把相机调远一些

风骚的动态文字出现了:)

项目地址

kinetic text

demo里不止本文创建的这一种形状，大家可以随意把玩。

总结

到此这篇关于three.js如何实现3d动态文字效果的文章就介绍到这了,更多相关three.js 3d动态文字内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！