在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.
推荐答案
首先,我发现了非常有用的博客文章 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屋!