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

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,//设置精灵矩形区域颜色 rotation:Math.PI/4,//旋转精灵对象45度，弧度值 map: texture,//设置精灵纹理贴图 }); // 创建精灵模型对象，不需要几何体geometry参数 var sprite = new THREE.Sprite(spriteMaterial); scene.add(sprite); // 控制精灵大小，比如可视化中精灵大小表征数据大小 sprite.scale.set(10, 10, 1); 只需要设置x、y两个分量就可以

.scale和.position

精灵模型对象和网格模型Mesh对一样基类都是Object3D，自然精灵模型也有缩放属性.scale和位置属性.position，一般设置精灵模型的大小是通过.scale属性实现，而精灵模型的位置通过属性.position实现，精灵模型和普通模型一样，可以改变它在三维场景中的位置，区别在于精灵模型的正面一直平行于canvas画布。

在使用透视投影相机对象的时候，精灵模型对象显示的大小和网格模型一样受距离相机的距离影响，也就是距离越远，显示效果越小。

Sprite用途

说到精灵模型对象，这种情况下你肯定关心它的用途，关于用途，你可以在三维场景中把精灵模型作为一个模型的标签，标签上可以显示一个写模型的信息，你可以通过足够多的精灵模型对象，构建一个粒子系统，来模拟一个下雨、森林、或下雪的场景效果。

3、通过上述知识我们创建库区并且给库区赋予名称

下面是主要代码

/* option参数含义 length:长 width:宽 positionX：x轴位置 positionY：y轴位置 color:创建的默认6个面的颜色值 */ function StoreArea(option) { var LineMat = new THREE.MeshLambertMaterial({color:0xDFCE19,NeedsUpdate: 1}); this.BorderWidth=8; this.PositionY=2.5; this.length=option.Length||1; this.width=option.Width||1; this.positionX=option.Position.X||0; this.positionZ=option.Position.Z||0; //水平线 var horizonalLineGeometry=new THREE.PlaneGeometry(this.BorderWidth, this.length); //垂直线 var verticalLineGeometry=new THREE.PlaneGeometry(this.BorderWidth ,this.width+this.BorderWidth*2); var topLine = new THREE.Mesh( horizonalLineGeometry, LineMat ); topLine.position.set(this.positionX,this.PositionY,this.positionZ-this.width/2-this.BorderWidth/2); topLine.rotation.x = -Math.PI / 2.0; topLine.rotation.z = -Math.PI / 2.0; var downLine = topLine.clone(); downLine.position.z= downLine.position.z +this.width+this.BorderWidth; var leftLine=new THREE.Mesh( verticalLineGeometry, LineMat ); leftLine.position.set(this.positionX-this.length/2-this.BorderWidth/2,this.PositionY,this.positionZ); leftLine.rotation.x = -Math.PI / 2.0; var rightLine=leftLine.clone(); rightLine.position.x=rightLine.position.x+this.length+this.BorderWidth; var positionY=this.PositionY; var positionX=this.positionX; var positionZ=this.positionZ; var group=new THREE.Group(); group.add(topLine); group.add(downLine); group.add(leftLine); group.add(rightLine); new THREE.FontLoader().load('./res/fonts/FZYaoTi_Regular.json',function(font){ 加入立体文字 var text= new THREE.TextGeometry(option.Title.Text,{ // 设定文字字体 font:font, //尺寸 size:option.Title.FontSize, //厚度 height:0.1 }); text.computeBoundingBox(); //3D文字材质 var m = new THREE.MeshStandardMaterial({color:"#" + option.Title.TextColor}); var mesh = new THREE.Mesh(text,m); mesh.position.y =positionY; mesh.position.z = option.Title.Position.Z+positionZ; mesh.position.x = option.Title.Position.X+positionX; mesh.rotation.x = -Math.PI / 2.0; mesh.name=option.Name; mesh.id=option.No; group.add(mesh); }); return group; }

我们通过第一种方式，创建立体文字到我们的项目中，效果如下：

项目代码

如果大家需要更加详细的讲解和全部源代码的话，可以看一下我的网易云课堂。当然剩下的博客我也会把核心代码给大家列出来。 大家可以看看我的网易云课堂

网易云课堂-threejs3D智能工厂应用