Threejs顯示中文字體

在Threejs的場景中用的不是英文字體會顯示亂碼，顯示中文字體的解決辦法以下：

threejs版本更新了。

1. 用這個網站生成中文ttf的json文件。

https://gero3.github.io/facetype.js/

1. 代碼中加入字體、用幾何體和材質生成文字

// 加載文字
    function loadTextFamily () {
      var textLoader = new THREE.FontLoader()
      textLoader.load(
        'fonts/chinese1.json',
        function (font) {
          fontFamily = font;
          console.log(font);
        }
      );
    }
    
    function createText (text, pos) {
      
      var options = {
        size: 10,
        height: 0,
        font: fontFamily, // 「引用js字體必須換成英文」
        bevelThickness: 1,
        bevelSize: 1,
        bevelSegments: 1,
        curveSegments: 50,
        steps: 1
      }
      var textGeo = new THREE.TextGeometry(text, options);
      var textMesh = new THREE.Mesh(textGeo, new THREE.MeshBasicMaterial())
       ... 省略設置文字position的代碼。很簡單 textMesh.positon.x ...明白了嗎 ...
       
      scene.add(textMesh);
    }

---

如下是 舊版本的threejs中文解決方案

思路：將ttf 字體格式 轉換成 js 文件格式，再將js引入，便能顯示了~

所用工具：facetype.js-gh-pages （百度雲下載）

工具使用方法：將「facetype.js-gh-pages」這個放在本地服務器上跑起來，用瀏覽器打開頁面，選擇ttf文件上傳，它自動轉成js並下載到本地瀏覽器默認下載路徑中。

注意事項：將生成的js文字庫打開，搜索「name」，將中文替換成英文全小寫「helvetiker」（名字自擬）

引用js字體：<script type="text/javascript" src="js/helvetiker_regular.typeface.js"></script>

給字體附上屬性：

var options = {
                size: 10,
                height: 0,
                weight: 'normal',
                font: 'helvetiker',「引用js字體必須換成英文」
                style: 'normal',
                bevelThickness: 1,
                bevelSize: 1,
                bevelSegments: 1,
                curveSegments: 50,
                steps: 1
           };
           scene.add(new THREE.Mesh(
                new THREE.TextGeometry("hello",options),
                new THREE.MeshBasicMaterial({color:0xcccccc})
                ))

這樣就能引入中文字體了 ^_^