更改 three.js 中纹理文本的字体系列

Question

我在我的应用程序中使用插件 «threex.dynamictexture.js» 并且在加载我的字体时遇到了一些问题（我什至使用现有的 helvetiker_bold.typeface.json 也遇到了问题）。我使用以下模式：

function loadFont() {

                var loader = new THREE.FontLoader();
                loader.load('/threejs/fonts/helvetiker_bold.typeface.json', function (font) {

                    dynamicTexture  = new THREEx.DynamicTexture(canvasWrapper.offsetWidth,canvasWrapper.offsetHeight);
//                    dynamicTexture.context.font  = 'bolder 90px Helvetiker';
                    var geometry2    = new THREE.SphereGeometry( 5, 100, 100);
                    var material2    = new THREE.MeshBasicMaterial({
                        map : dynamicTexture.texture
                    });
                    var mesh2    = new THREE.Mesh( geometry2, material2 );
                    console.log(font);

                    dynamicTexture.texture.needsUpdate  = true;
                    mesh2.position.set(10, 10, 10);
                    scene.add( mesh2 );

                    dynamicTexture.drawText('Hello', 100, 300, 'black', 'bolder 90px helvetiker');


                });
            }

在那之后我可以在我的几何体上看到渲染的文本纹理，但字体系列仍然是默认的。如果我使用 Arial 而不是 Helvetiker（或 helvetiker），则呈现的文本将变为 Arial。

我到处找，但只找到有关 TextGeometry 的解决方案。顺便说一句，我可以使用 TextGeometry 加载程序加载我的字体系列。你能帮助我吗？谢谢！

Answer 1

您似乎混淆了系统字体和 three.js 字体。

helvetiker_bold.typeface.json 与 Helvetiker.ttf 没有任何共同之处。它旨在用于 TextGeometry。要在 canvas 上使用 "Helvetiker" 绘图，您必须 add/install Helvetiker.ttf 到您系统上的字体。

如果您自己使用，找到并安装您需要的字体就可以了。但是其他用户，他们的系统上没有这种字体，将看到使用默认字体的文字。

解决方案是从标准系统字体中找到一种或多或少类似于 Helvetiker 的字体（或您想要 use/see 的字体）。

更改 three.js 中纹理文本的字体系列

Change font-family for texture text in three.js

textures

dynamic-text

three.js