在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中获取字体

回答

相关问题