ThreeJS字体无法加载

Question

我最近开始与ThreeJS合作,我无法弄清楚这一点.我想加载自己的字体来显示场景中的3D文本对象,我按照这个例子一切顺利,但现在当我只更改TextGeometry对象中的"font:"选项时,一切都崩溃了,没有显示任何内容(错误是字体未定义)

我使用typeFace来创建字体,包括脚本似乎很好,我个人认为有一些字体的名称,我输错了,因为我读到某处.typeface.js之间的所有东西都是实际的字体threeJS正在寻找并且应该包含的名称(小写),但在示例中,没有_regular.或者font-name和font-family之间的区别......不知道!

谢谢 .

    <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缺少正常重量和正常风格的字体投石机.

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请在出现错误时在浏览器控制台中进行评估.这将为您提供所有当前注册字体的名称.