three.jsでフォントを取得する

Question

私はthree.jsにフォントをロードしようとしていますが、これまでのところ信じられないほど難しいです。希望はsbがこの問題を助けることができます。

Booking mastering three.jsのように、javascriptフォントを使ってみました。その本からのバージョンではうまくいきました。私は最新のバージョンのthree.jsにアップグレードしなければなりませんでした。別の理由で、本のフォントは最新のthree.jsバージョンでは動作しません。そこで、私はthree.jsのjsonフォントをhttps://gero3.github.io/facetype.js/経由でjs-fontに変換しようとしましたが、変換ボタンを押しても何もしないので動作しませんでした。

次に、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を使用します。私の理解は、コールバック関数が "load"イベントで実行されるコードを見ることから非同期関数だということです。読み込みには時間がかかるので、フォントのロードが完了する前に残りのコードが実行されています。残りのコードをinit（）関数に移動すると、それが機能するはずです。