在three.js中獲取字體

我想在three.js中加載一個字體，這種字體到目前爲止是難以置信的。希望某人能夠幫助解決這個問題。在three.js中獲取字體

我嘗試使用javascript的字體，如書中提出的掌握three.js。隨着本書的工作版本。我不得不升級到three.js的最新版本，但出於另一個原因，本書中的字體與最新的three.js版本不兼容。所以我嘗試通過https://gero3.github.io/facetype.js/將three.js的json字體轉換爲js字體。這不起作用，因爲當我按下轉換按鈕時，網站不會執行任何操作。

然後我嘗試着使用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);

來源

2016-08-19 Tom

的

FontLoader（）使用罩下XHRLoader。我的理解是，它是一個查看代碼的異步函數，其中回調函數在「load」事件上執行。加載需要時間，所以在字體加載完成之前，其他代碼正在執行。將其餘的代碼移動到init（）函數中，它應該可以工作。

來源

2016-08-20 22:50:11

謝謝。將嘗試它。有什麼方法可以知道何時加載字體？否則，它似乎我必須把我所有的代碼創建一個場景，例如將對象合併和減去字體加載的初始化方法，這對我來說看起來非常難看。或者有沒有辦法同步加載它？ – Tom

您可以製作場景，多維數據集和其他任何內容，然後僅在字體完成加載時添加文本網格。所以你的init（）回調函數將包含所有的textGeo和textMesh初始化，最後以scene.add（textMesh）結束。 –

在three.js中獲取字體

回答

相關問題