three.js低版本添加文字(如71版本)

研究了半天，最后終於加載成功了，記錄一下three.js 71版本的文字加載，下面開始整個過程

 

首先，將ttf字體轉換成js文件

源碼版： https://github.com/gero3/facetype.js

在線版： http://gero3.github.io/facetype.js/

 

並引入項目，如

<script src="./lib/arial_black_regular.typeface.js"></script>

此處有不少坑，我來提醒一下

js字體文件名需要改為 xxxxxxx_regular.typeface.js 或 xxxxxxx.typeface.js （本人未驗證是否必須，消息來源於其他文章，請自己嘗試）

且，文件名 arial_black_regular.typeface 必須全部小寫 （本人已驗證，確實必須小寫，請自己嘗試）

 

 

其次，打開  arial_black_regular.typeface.js 文件，搜索關鍵詞 familyName ，將familyName 的值改為這個字體的名稱，

以我在做的項目為例，我改為 arialblack ，依然小寫（本人已驗證，確實必須小寫，請自己嘗試）

 

然后，在項目中的需要創建字體的地方定義文字對象的配置

var options = {
    size: 10,
    height: 0,
    weight: 'normal',
    font: 'arialblack',　　//這個名字就是剛才修改的familyName的值
    style: 'normal',
    bevelThickness: 1,
    bevelSize: 1,
    bevelSegments: 1,
    curveSegments: 50,
    steps: 1
};

// 顯示內容
var text = "Text3D";

// 字體幾何模型　
var text_geometry = new THREE.TextGeometry(text, options);

// 字體材質
var text_material = new THREE.MeshBasicMaterial({ color: 0xff0000 });

// 字體網格
var text_mesh = new THREE.Mesh(text_geometry, text_material);

// 加入到場景中
scene.add(text_mesh);

 

最后，效果如下 (如果導入的字體中沒有中文。

 

當顯示內容又包含中文，如“引入Three-Text3D成功”，漢字會變成？問號)

 

如果你使用71版本的 three.js 有可能出現下面的情況 (71版本的three.min.js正常)

這是因為與生產版本three.min.js相比，開發版本three.js中，_typeface_js的聲明部分被注釋了，如圖

解開注釋即可，但是揭開后是否存在其他問題，我並沒有驗證