49 Three.js使用THREE.TextGeometry创建三维文本解决中文乱码的问题

​

解决方案

如果写汉字发现出来的只是一堆​​？？？？​​​的话，证明当前引入的字体不支持汉字。我们的解决方案就是引入可以支持汉字​​json​​​文件。那么问题来了，这种​​json​​​文件我们怎么获得？
- 我们可以使用​​​ttf​​​格式的文件进行转换即可，有一个地址，可以进行在线转换​​http://gero3.github.io/facetype.js/​​​，在当前地址可以转换出来json格式的文件。
- 然后再按照上一节的方法，异步引入文件即可

//创建loader进行字体加载，供后面的模型使用
                var loader = new THREE.FontLoader();
                loader.load( 'assets/fonts/MicrosoftYaHei_Regular.json', function ( response ) {
                    gui.font = response;
                    gui.asGeom();
                } );

然后书写汉字，就不会出现乱码情况了

asGeom: function () {
                // 删除掉原来的旧模型
                scene.remove(text1);
                scene.remove(text2);
                // 重新创建模型
                var options = {
                    size: gui.size,
                    height: gui.height,
                    weight: gui.weight,
                    font: gui.font,
                    bevelThickness: gui.bevelThickness,
                    bevelSize: gui.bevelSize,
                    bevelSegments: gui.bevelSegments,
                    bevelEnabled: gui.bevelEnabled,
                    curveSegments: gui.curveSegments,
                    steps: gui.steps
                };

                text1 = createMesh(new THREE.TextGeometry("测试汉字", options));
                text1.position.z = -100;
                text1.position.y = 100;
                scene.add(text1);

                text2 = createMesh(new THREE.TextGeometry("Three.js", options));
                scene.add(text2);
            }