支持Three.js中的波斯语/阿拉伯语文本

Question

我需要用波斯语/阿拉伯语显示一些文字。我加载了包含字符的字体，我使用TextGeometry在场景中创建文本：

var loader = new THREE.FontLoader();
loader.load('B Zar_Regular.js', function (font) {
    var textGeo = new THREE.TextGeometry('سلام!', {
        font: font,
        size: 1,
        height: 0.05,
        curveSegments: 12,
    });
    var material = new THREE.MeshNormalMaterial();
    var textMesh = new THREE.Mesh(textGeo, material);
    textMesh.position.x = 15;
    scene.add(textMesh);
});

我希望看到سلام!，但输出结果为：

字母被分开，字符顺序被错误地反转。毕竟，似乎threejs不支持rtl语言。我是对的还是我错过了什么？有没有解决方法作为快速解决方案？感谢。

Answer 1

这是一个复杂的问题。连字，连接字母的书法笔画，西方读者最熟悉的草书作为草书英语的一部分，在阿拉伯语中不是可选的。连字是语言固有的，改变了文本的含义和形式。 font.js class旨在逐个获取每个字母（字形）并将其转换为形状路径。这在阿拉伯语中不起作用，因为joining rules are complex取决于特定的字母组合。

我不相信有一个可以在three.js中修复的修复程序。虽然我很想知道O.P.

提到的潜在解决方案是什么

有可能将孤立的字母转换为最终的阿拉伯语结合形式via this script或maybe this one等。然后可以将最终的表示形式发送到Three.js进行显示，以便已经处理连字连接，并且three.js接收最终的连接形式而不是孤立的字形。

使用text to path converter将文本转换为svg路径，然后使用three.js中的SVGLoader.js将字母作为挤出路径加载，这可能是一项更简单的任务。但是必须对此进行测试以确保将文本转换为路径处理阿拉伯语，然后如果确实如此，则还需要检查连字连接的准确性。

Answer 2

首先，我发现了Chris Loer撰写的非常有用的博文here。他编写了一个解决问题的插件（mapbox-gl-rtl-text.js）。

用法示例：

k

<小时/> PS：当我使用这个插件和普通的Farsi字体时，一些字母没有显示，所以我添加了一些extra code来修复它。

var rtlText = require('mapbox-gl-rtl-text');
var arabicString = "سلام";
var shapedArabicText = rtlText.applyArabicShaping(arabicString);
var readyForDisplay = rtlText.processBidirectionalText(shapedArabicText, []);

用法示例：

RtlTextHelper.farsify("سلام");