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

最新推荐文章于 2024-06-18 17:31:22 发布

暮志未晚NAN

最新推荐文章于 2024-06-18 17:31:22 发布

阅读量4.3k

点赞数 3

分类专栏： Three.js笔记文章标签：中文乱码 text three-js webgl

本文链接：https://blog.csdn.net/qq_30100043/article/details/78907922

版权

Three.js笔记专栏收录该内容

118 篇文章 296 订阅

订阅专栏

这里写图片描述

案例查看地址：http://www.wjceo.com/blog/threejs/2018-02-12/51.html

解决方案

如果写汉字发现出来的只是一堆？？？？的话，证明当前引入的字体不支持汉字。我们的解决方案就是引入可以支持汉字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);
            }