欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2023-11-01 19:05:04
three.js使用three.textgeometry创建三维文本中文乱码的问题如何解决? 解决方案 如果写汉字发现出来的只是一堆????的话,证明当前引入的字体不支持汉...

three.js使用three.textgeometry创建三维文本中文乱码的问题如何解决?

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

解决方案

如果写汉字发现出来的只是一堆????的话,证明当前引入的字体不支持汉字。我们的解决方案就是引入可以支持汉字json文件。那么问题来了,这种json文件我们怎么获得?

- 我们可以使用ttf格式的文件进行转换即可,有一个地址,可以进行在线转换https://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);
            }