threejs创建三维文字TextGeometry
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:类似与基础材质,但可以创建虚线效果
相关推荐
ALLENJIAO 2020-06-13
stcaolei 2020-03-08
moyebaobei 2020-03-07
stcaolei 2020-03-06
ixshells 2020-03-05
liulinsp 2020-01-09
ALLENJIAO 2019-12-20
moyebaobei 2019-09-06
涓涓溪流 2018-03-02
ALLENJIAO 2019-07-01
moyebaobei 2019-07-01
颜辉 2019-06-28
moyebaobei 2019-06-28
liulinsp 2019-06-27
ALLENJIAO 2019-06-27
ALLENJIAO 2019-06-27
moyebaobei 2015-01-05
stcaolei 2019-06-25
cibeidelangren 2019-06-21