Three.js使用THREE.TextGeometry创建三维文本中文乱码的问题如何解决?
程序员文章站
2023-11-01 19:05:04
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); }
下一篇: python实现模拟登录