ThreeJS字体未加载

Question

我最近开始使用 ThreeJS，但我想不通。 我想加载自己的字体以在场景中显示 3D 文本对象，我跟着 this example 一切顺利，但现在当我只更改 TextGeometry 对象中的“字体：”选项时，一切都崩溃了，什么都没有显示（错误是字体未定义）

我使用 typeFace 创建字体并包含脚本似乎很好， 我个人认为我输入错误的字体名称有一些东西，因为我在某处读到 .typeface.js 之间的所有内容都是threeJS正在寻找的实际字体名称，应该包含（小写），但是在示例中，没有 _regular 。 或者字体名称和字体系列之间的区别......不知道！

谢谢。

    <script type="text/javascript" src="mrdoob-three.js-1769fbf/examples/fonts/helvetiker_regular.typeface.js"></script>
    <script type="text/javascript" src="trebuchet_ms.typeface.js"></script>


        var textGeo = new THREE.TextGeometry( "THREE.JS", {
            size: 50,
            height: 10,
            curveSegments: 50,
    //        font: "helvetiker",  works fine 
            font: "trebuchet_ms",
    //        weight: "bold",
    //        style: "normal",
            bevelThickness: 11,
            bevelSize: 0,
            bevelEnabled: true
        });
        textGeo.computeBoundingBox();
        var textMaterial = new THREE.MeshPhongMaterial( { color: 0xff0000} );
        var mesh = new THREE.Mesh( textGeo, textMaterial );
        mesh.position.set(0,0,0) ;
        mesh.castShadow = true;
        mesh.receiveShadow = true;
        scene.add( mesh );

Uncaught 正常粗细和正常样式的字体 trebuchet 是 不见了。

Answer 1

这里是如何找到要使用的字体名称：

1. 打开 typeface.js 文件
2. 查找 font_family 属性："font_family_name":"Trebuchet MS"
3. 将其更改为全部小写。空间很好。

所以在你的具体例子中：

var textGeo = new THREE.TextGeometry( "THREE.JS", {

    size: 200,
    height: 50,
    curveSegments: 12,

    font: "trebuchet ms",
    // weight: "normal",
    // style: "normal",

    bevelThickness: 2,
    bevelSize: 5,
    bevelEnabled: true

});

提示：如有疑问，请在遇到错误时在浏览器控制台中评估 THREE.FontUtils.faces。这将为您提供所有当前注册字体的名称。