在three.js中获取字体

我正在尝试在three.js中加载字体，到目前为止这是难以置信的困难。希望某人能在这件事上帮忙

我试着使用javascript字体，就像《掌握三个.js》一书中建议的那样。用那本有效的书的版本。我不得不升级到最新版本的three.js，但是由于另一个原因，书中的字体与最新版本的three.js不兼容。因此，我尝试通过将three.js的json字体转换为js字体，但没有成功，因为当我按下convert按钮时，网站没有做任何事情

然后，我尝试使用FontLoader根据最新的three.js版本中的一些示例来确定自己的方向。在那里，我很难获得字体，因为FontLoader不返回任何内容。因此，我尝试在传递给FontLoader的函数中将字体分配给全局变量myfont。但是，当我执行loader.load（…）时，该函数不会被调用，而只有在我放在这里的代码片段的最后一行被执行时，才会在代码中被调用。也就是说，我事先得到了代码中的错误。 为什么代码只在加载字体时执行而不在加载字体时执行

干杯 汤姆

---

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

谢谢。我会试试的。有没有办法知道什么时候加载字体？否则，我似乎必须将所有用于创建场景的代码（例如，合并和减去对象）放入字体加载的初始化方法中，这对我来说非常难看。或者有没有一种同步加载的方法？你可以制作场景、立方体和其他任何东西，然后在字体加载完成后只添加文本网格。因此，init（）回调函数将包含所有textGeo和textMesh初始化，最后以scene.add（textMesh）结束。

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