支持 Three.js 中的波斯语/阿拉伯语文本 [英] Support for Farsi/Arabic texts in Three.js

问题描述

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

I need to show some text in Persian/Arabic language. I loaded a font including characters and I used TextGeometry to create a text on the scene:

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);
});

我期待看到 سلام! 但输出是:

I was expecting to see سلام! but the output was:

字母被分开，字符顺序被错误地颠倒了.毕竟似乎threejs不支持rtl语言.我是对的还是我错过了什么?是否有任何解决方法作为快速解决方案?谢谢.

letters are separated and order of characters is reversed mistakenly. After all it seems threejs do not support rtl languages. Am I right or I missed something? Is there any workaround as a quick solution? Thanks.

推荐答案

首先我发现了非常有用的博文 此处 作者:Chris Loer.他写了一个插件(mapbox-gl-rtl-text.js)这解决了问题.

First of all I found very useful blog post here by Chris Loer. He has written a plugin (mapbox-gl-rtl-text.js) that solves the problem.

使用示例:

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

<小时>PS: 当我使用带有常见波斯语字体的这个插件时，一些字母没有显示，所以我添加了一些 额外的代码来修复它.

---

PS: When I used this plugin with common Farsi fonts some of letters was not shown so I add some extra code to fix it.

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

使用示例:

private createTextMesh(font, text) {
        var shapedText = RtlTextHelper.farsify(text);
        var fontSize = 0.3;
        var textHieght = 0.2;
        var material = new THREE.MeshBasicMaterial({
            color: this.colors.label.normal,
            side: THREE.DoubleSide
        });
        var textGeo = new THREE.TextGeometry(shapedText, {
            font: font,
            size: fontSize,
            height: 0.05,
            curveSegments: 12
        });
        var textMesh = new THREE.Mesh(textGeo, material);
        textGeo.computeBoundingBox();
        var box = new THREE.Box3().setFromObject(textMesh);
        var textLength = box.max.x;
        return {
            mesh: textMesh,
            hieght: textHieght,
            font: {
                size: fontSize
            },
            length: textLength
        };
    }

这篇关于支持 Three.js 中的波斯语/阿拉伯语文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！