ThreeJS中文字体乱码问题

这几天刚刚接触ThreeJS，使用几天发现ThreeJS中默认是不支持中文的，只能显示英文，在网上找了一些资料，终于可以显示中文了。在此把显示中文的方法写下来，供大家参考，本人只是小白，大神勿喷。。。

1、默认的threejs包中会带一些字体，在examples中里面有个font文件夹，里面是threejs自带的一些字体格式

font问价夹里面就是这样的，默认带的字体格式是不支持中文的

2、想要显示中文，就需要我们自己引入自己的中文包，将ttf的字体格式转换为json或js文件格式

ttf字体格式需要在哪里找呢，在计算机中C盘，windows->Fonts->里面存放的就是各种计算机的各种字体格式.ttf文件（不过需要找一个小一点的，太大编辑器打开会崩掉的，这里我使用的是方正兰亭超细黑简体）

3、将之前找到的字体.ttf文件转换成json文件格式或js文件格式，使用的线上工具是http://gero3.github.io/facetype.js/

4、将转换后json文件加载到threejs中就可以了，再给字体附上属性，就可以展现中文汉字了

var loader = new THREE.FontLoader();
         //加载字体库，加载成功后将字体库传给回调函数；
         loader.load('font/FZLanTingHeiS-UL-GB_Regular.json',function(response){
                 var font = response;
                 /*创建字体几何图形，其中TextGeometry的第一个参数是需要绘制的文本，第二个参数是一个json对象，设置如何绘制文本，具体意义为：
                    font: 使用的字体库；
                    size:绘制字体的大小；
                    height:绘制文本的厚度；
                    bevelEnabled：是否允许棱角平滑过渡；
                    bevelSize:棱角平滑过渡的尺寸；*/
                 //注意:bevelSize通常要比size和height小一个量级，过渡带就会很饱满甚至比文本主体本身还要大


                 var textGeometry = new THREE.TextGeometry("学习Three.js",{
                     "font" : font,
                     "size" : 70,
                     "height" : 20,
                     "bevelEnabled" : true,
                     "bevelSize": 2
                 })

                 /*在3D世界里所有的物体都是由网格构成的，在three.js中，绘制图形的步骤是：
                先使用geometry定义图形的几何形状，然后使用几何形状和材质构建网格;*/

                 /*这里使用材质数组来对网格进行修饰，材质数组的第一项修饰文字正面和背面，
                 第二项修饰文字的侧面即顶部和底部。使用的两个材质都是MeshPhongMaterial,这种材质的特点是能够像塑料一样反光。*/
                 text = new THREE.Mesh(textGeometry,new THREE.MultiMaterial( [
                     new THREE.MeshPhongMaterial( { color: 0xffffff, shading: THREE.FlatShading } ),
                     new THREE.MeshPhongMaterial( { color: 0xffffff, shading: THREE.SmoothShading } )
                 ] ))

5、整个程序的源码