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：類似與基礎材質，但可以創建虛線效果