前端3D文字效果

今天来讨论一下前端的3D文字效果，如图：

3D文字效果

字体阴影

看到这样的效果，首先想到的当然是CSS中的文字阴影来实现，首先给出HTNL代码：

<div class="font-3d">CSS 3D效果</div>

接下来就是添加样式了，大笔一挥如下：

body{
  background: #c7f6f6;
}
.font-3d{
  font-size: 50px;
  font-weight: bold;
  color: #ffebcd;
  text-shadow: 4px 4px 0 #158af7;
}

最关键的一个样式是text-shadow，他的签名是这样的：text-shadow: h-shadow v-shadow blur color;，其中第一个参数h-shadow是水平方向的偏移量，正数是向右偏移，负数是向左偏移；第二个参数v-shadow是垂直方向偏移量，正数是向下偏移，负数是向上偏移；第三个参数blur是模糊大小，值越大越模糊，该值可以不写，默认是0，表示不模糊；第四个参数color是颜色，同样可以不写，默认是当前字体的颜色。

此时我们发现，单纯的阴影边界地方有菱角，缺乏立体感，具体效果如下：

3D阴影

多重阴影模拟

为了让效果更好，我们可以写多重阴影来模拟，阴影每次增加1点（这里是1px），这样看着就像阴影连着似得，如下：

body{
  background: #c7f6f6;
}
.font-3d{
  font-size: 50px;
  font-weight: bold;
  color: #ffebcd;
  text-shadow:
    1px 1px 0 #158af7,
    2px 2px 0 #158af7,
    3px 3px 0 #158af7,
    4px 4px 0 #158af7;
}

此时的效果，就跟刚开始看到的是一样的了。你可以点击这里自己修改一下样式试试。

three.js中的3D字体

three.js是非常著名的3D库，写个3D字当然是不在话下（单纯的用这做3D字绝对是大材小用）。three.js使用3D字体大概需要2步骤，第1步引入typeface类型的字体，第2步把TextGeometry文字结构对象加入到场景中。具体的可以看一下官方给出的这篇文章，这里就不再重复叙述了。