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.（斜角段数）

eg：

（1）

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); });

输出功效

（2）换一种材质

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.MeshNormalMaterial({ flatShading: THREE.FlatShading, transparent: true, opacity: 0.9 }); var txtMesh = new THREE.Mesh(txtGeo,txtMater); txtMesh.position.set(-2,2.3,-0.4); scene.add(txtMesh); });

说明：

　　此中fonts/helvetiker_regular.typeface.json是官网给出的撑持的字体格局

TextGeometry uses typeface.json generated fonts. Some existing fonts can be found located in /examples/fonts and must be included in the page.

　　MeshBasicMaterial是一种非常简单的材质，这种材质不考虑场景中光照的影响

　　MeshNormalMaterial 网格法向量材质，按照物体外貌的法向量计算颜色

增补：

Threejs材质种类

MeshBasicMaterial：为几何体赋予一种简单的颜色，或者显示几何体的线框 MeshDepthMaterial：按照网格到相机的距离，该材质决定如何给网格染色 MeshNormalMaterial：按照物体外貌的法向量计算颜色 MeshFaceMaterial：这是一种容器，可以在该容器中为物体的各个外貌上设置差此外颜色 MeshLambertMaterial：考虑光照的影响，，可以创建颜色惨淡，不光亮的物体 MeshPhongMaterial：考虑光照的影响，可以创建光亮的物体 ShaderMaterial：使用自界说的着色器措施，直接控制极点的安排方法，以及像素的着色方法 LineBasicMaterial：可以用于THREE.Line几何体，从而创建着色的直线 LineDashedMaterial：类似与根本材质，但可以创建虚线效果

threejs创建三维文字TextGeometry