问题情况

threeJs中使用TextGeometry方法添加文字当时中文的时候会出现乱码:

const geomeText = new TextGeometry( '你好three-Js', { font, size: 50, height: 80, curveSegments: 12, bevelEnabled: true, bevelThickness: 20, bevelSize: 6, bevelSegments: 3 } );

three.js值得学吗(Three-JS使用TextGeometry中文乱码)(1)

原因

从上面参数中我们可以看到有一个叫 font 的属性,该属性是THREE.Font的实例。(参考:https://threejs.org/docs/index.html#examples/zh/geometries/TextGeometry) 该实例使用fontLoader 将其加载进来,在threejs中本身提供的font实例是不支持中文的。

three.js值得学吗(Three-JS使用TextGeometry中文乱码)(2)

字体加载进来通过打印发现仅支持最基本的字符:

three.js值得学吗(Three-JS使用TextGeometry中文乱码)(3)

解决方案

1、可以想办法提供自己需要的font实例;

2、请使用官网推荐的其他文字创建加载方案(https://threejs.org/docs/index.html#manual/zh/introduction/Creating-text)

评价:提供自己的字体实例这个难度还是比较大的,官方的其他方案也不是很灵活。最佳解决方案正在寻找中!!!^_^

three.js值得学吗(Three-JS使用TextGeometry中文乱码)(4)

,