Question

我正在尝试在three.js中加载一个字体到目前为止难以置信。希望某人可以帮助解决这个问题。

我尝试使用javascript字体，如Mastering three.js一书中所建议的那样。随着该书的版本工作。我不得不升级到最新版本的three.js，但出于其他原因，书中的字体不适用于最新的three.js版本。所以我尝试通过https://gero3.github.io/facetype.js/将three.js的json字体转换为js-fonts。由于网站在按下转换按钮时没有做任何事情，因此无法正常工作。

然后我尝试使用FontLoader来定位最新的three.js版本中的一些示例。因为FontLoader没有返回任何内容，所以我很难获得字体。因此，尝试将字体分配给我传递给FontLoader的函数中的全局变量myfont。但是，当我执行loader.load（...）时，该函数不会被调用，但只有当我放在这里的片段的最后一行被执行时才会调用我的代码。即我事先在代码中遇到错误。有没有一个很好的理由为什么代码只会被执行，而不是在我加载字体时？

干杯汤姆

var loader = new THREE.FontLoader();
loader.load( 'three.js-master/examples/fonts/helvetiker_regular.typeface.json', function ( font ) {
    init( font );
} );

var myfont;

function init( font ) {
    myfont = font;
    console.log("inner value "+myfont);
}   
console.log("2nd time" +myfont);

var params = {
    material: 0,
    extrudeMaterial: 1,
    bevelEnabled: false,
    bevelThickness: 8,
    bevelSize: 4,
    font: myfont,
    weight: "normal",
    style: "normal",
    height: 0,
    size: 11,
    curveSegments: 4
};

var textGeo = new THREE.TextGeometry("3D text", params);
console.log("3rd time "+myfont);

textGeo.computeBoundingBox();
console.log("4th time "+myfont);

textGeo.computeVertexNormals();
console.log("5th time "+myfont);
var material = new THREE.MeshFaceMaterial([
    new THREE.MeshPhongMaterial({color: 0xff22cc, shading: THREE.FlatShading}), // front
    new THREE.MeshPhongMaterial({color: 0xff22cc, shading: THREE.SmoothShading}) // side
]);
console.log("6th time "+myfont);
var textMesh = new THREE.Mesh(textGeo, material);
console.log("7th time "+myfont);
textMesh.position.x = -textGeo.boundingBox.max.x / 2;
textMesh.position.y = -5;
textMesh.position.z = 30;
textMesh.name = 'text';
scene.add(textMesh);
console.log("8th time "+myfont);

camControl = new THREE.OrbitControls(camera, renderer.domElement);

var geometry = new THREE.BoxGeometry( 70, 70, 70 );

var texture =  THREE.ImageUtils.loadTexture('wallpaper.jpg');
var mainMaterial = new THREE.MeshBasicMaterial({ 
    map:texture, 
    side:THREE.DoubleSide 
}); 
console.log("9th time "+myfont);
var nonMainMaterial = new THREE.MeshBasicMaterial( { color: 0xcccccc } );

var materials = [mainMaterial, nonMainMaterial,nonMainMaterial,nonMainMaterial,nonMainMaterial,nonMainMaterial];
var meshFaceMaterial = new THREE.MeshFaceMaterial( materials );

console.log("10th time "+myfont);
var cube = new THREE.Mesh( geometry, meshFaceMaterial );
            console.log("11th time "+myfont);

scene.add( cube );
console.log("12th time "+myfont);


var cubeBSP = new ThreeBSP(cube);
console.log("13th time "+myfont);
var textBSP = new ThreeBSP(textMesh);
console.log("14th time "+myfont);
var resultBSP = cubeBSP.subtract(textMesh);

Answer 1

FontLoader（）使用引擎盖下的XHRLoader。我的理解是，通过查看代码，它是一个异步函数，其中回调函数在＆＃34; load＆＃34;上执行。事件。加载需要时间，因此在字体加载完成之前，其余代码正在执行。将其余代码移到init（）函数中，它应该可以工作。

获取three.js中的字体

1 个答案: