如何用Three.js显示汉字

Question

我正在使用OBJLoader加载一个大型3D模型（在.obj文件中描述），我想在其表面上显示模型名称。虽然看起来Three.js只能显示英文字符。我的问题是如何在Three.js中显示中文字符？

Answer 1

有几种方法可以显示文本（https://github.com/mrdoob/three.js/wiki/Text-in-Three.js），但由于导出中文字体可能比较困难，所以可能更容易将中文字体绘制到画布纹理中，并将纹理用作场景中的材质。

Answer 2

您似乎可以使用Facetype.js来获取中文字体库，例如“YaHei_Regular.typeface.json”，然后您就可以显示中文字符。

var fontLoader = new THREE.FontLoader();
    fontLoader.load("YaHei_Regular.typeface.json", (font)=> {
        this.font = font;
    });

Answer 3

另一种选择是使用msdf-bmfont-xml。此示例使用Microsoft YaHei。

charset.txt -

你好，世界

您可能需要先install dependencies。然后：

npm install msdf-bmfont-xml -g
msdf-bmfont -f json yahei.ttf -i charset.txt --pot --square

最后，使用three-bmfont-text呈现文本。