第6章如何在场景中创建立体文字

zhuifeng33

已于 2022-04-08 09:29:50 修改

阅读量653

点赞数

分类专栏： THREEJS系列文章标签： three.js 3d

于 2020-10-20 17:26:37 首次发布

本文链接：https://blog.csdn.net/zhuifeng33/article/details/109185331

版权

本文介绍了如何在THREE.js场景中创建立体文字，包括通过TextGeometry和通过精灵模型与Canvas画布的方式。TextGeometry需要字体转换为.json文件，而精灵模型则无需几何体，使用SpriteMaterial进行创建。精灵模型适用于作为标签或构建粒子系统。文章还提供了创建立体文字的代码示例。

摘要由CSDN通过智能技术生成

1、通过TextTrue创建

THREE.js 封装了 TextGeometry 类可以很容易地生成三维文字

TextGeometry(text : String, parameters : Object)

参数说明

text — The text that needs to be shown. （要显示的字符串）
parameters — Object that can contains the following parameters.
　　font — an instance of THREE.Font.（字体格式）
　　size — Float. Size of the text. Default is 100.（字体大小）
　　height — Float. Thickness to extrude text. Default is 50.（字体的深度）
　　curveSegments — Integer. Number of points on the curves. Default is 12.（曲线控制点数）
　　bevelEnabled — Boolean. Turn on bevel. Default is False.（斜角）
　　bevelThickness — Float. How deep into text bevel goes. Default is 10.（斜角的深度）
　　bevelSize — Float. How far from text outline is bevel. Default is 8.（斜角的大小）
　　bevelSegments — Integer. Number of bevel segments. Default is 3.（斜角段数）

var textLoad = new THREE.FontLoader().load('fonts/helvetiker_regular.typeface.json',function(font){
   　var txtGeo = new THREE.TextGeometry('hello world',{
           font: font,
           size: 0.8,
           height: 0.1,
           curveSegments: 12,
           bevelEnabled: true,
           bevelThickness: 0.1,
           bevelSize: 0.05,
        　　bevelSegments: 3
       });
 　　var txtMater = new THREE.MeshBasicMaterial({color: 0x0000ff});
    var txtMesh = new THREE.Mesh(txtGeo,txtMater);
    txtMesh.position.set(-2,2.3,-0.4);
    scene.add(txtMesh);
});

字体转换网站：https://gero3.github.io/facetype.js/

将.ttf字体转换为.json

2、通过精灵模型和Cavas画布

Three.js的精灵模型对象Sprite和Threejs的网格模型Mesh一样都是模型对象，基类都是Object3D,关于精灵模型对象Sprite的方法和属性除了可以查看文档Sprite，也可以查看基类Object3D。

创建精灵模型对象Sprite和创建网格模型对象一样需要创建一个材质对象，不同的地方在于创建精灵模型对象不需要创建几何体对象Geometry，精灵模型对象本质上你可以理解为已经内部封装了一个平面矩形几何体PlaneGeometry，矩形精灵模型与矩形网格模型的区别在于精灵模型的矩形平面会始终平行于Canvas画布。

Sprite和SpriteMaterial

通过Sprite创建精灵模型不需要几何体，只需要给构造函数Sprite的参数设置为一个精灵材质SpriteMaterial即可。

精灵材质对象SpriteMaterial和普通的网格材质一样可以设置颜色.color、颜色贴图.map、开启透明.transparent、透明度.opacity等属性，精灵材质对象SpriteMaterial的基类是材质Material。

精灵材质SpriteMaterial的属性除了和网格材质类似的属性和方法外，还有一些自己独特的方法和属性，比如.rotation旋转精灵模型，更多相关属性和方法可以查看threejs文档关于SpriteMaterial的介绍。

var texture = new THREE.TextureLoader().load("sprite.png");
// 创建精灵材质对象SpriteMaterial
var spriteMaterial = new THREE.SpriteMaterial({
   
  color:0xff00ff,//