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

这样就能引入中文字体了 ^_^