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


                });
            }

之后，我可以在我的几何体上看到渲染的文本纹理，但font-family仍然是默认的。如果我使用Arial而不是Helvetiker（或helvetiker），渲染的文本将成为Arial。

我到处寻找，但发现只有TextGeometry解决方案。顺便说一句，我可以使用TextGeometry加载器加载我的font-family。你能帮助我吗？谢谢！

Answer 1

似乎你将系统字体与three.js字体混在一起。

helvetiker_bold.typeface.json与Helvetiker.ttf没有任何共同之处。它旨在用于TextGeometry。与＆＃34; Helvetiker＆＃34;在画布上，您必须在系统上的字体中添加/安装Helvetiker.ttf。

如果您自己使用它，如果您找到并安装所需的字体，则没关系。但是其他用户，他们的系统上没有这样的字体，会看到使用默认字体的文字。

解决方案是从标准系统字体中找到一种与Helvetiker（或您想要使用/看到的字体）大致相似的字体。

在three.js中更改纹理文本的font-family

1 个答案: