Three.js使用TextBufferGeometry创建3D文本

学习交流欢迎加群：789723098，博主会将一些demo整理共享

我们知道在Web前端上，可以用CSS样式设置多种多样的二维字体格式。如果我们想文本当成3D几何绘制在场景中，即生成3D文本来提升场景的逼格，可不可以呢？答案是肯定的，Three.js中提供了绘制文本的接口，TextGeometry和TextBufferGeometry，使用这两个接口，再配合FontLoader就可以实现3D字体的绘制和加载啦。

这里需要使用到Three.js的FontLoader来加载样式数据，然后对字体的样式进行设置：

loader = new FontLoader();
loader.load( 'fonts/gentilis_regular.typeface.json', ( font ) => {
    // TODO 设置样式
})

等字体创建号之后，为了更加凸显字体的效果，可以使用OutlineEffect这个接口，对字体进行描边：

effect = new OutlineEffect( renderer );

effect.render( scene, camera );

下面笔者做了一个demo,先来看demo的效果：