如何只加载一次字体？ （TS / Three.JS）

Question

所以，我想创建20个文本块（使用相同的字体）。

如果尚未加载字体，则新的TextGeometry会发送错误。

目前，我把每一个

new THREE.TextGeometry(this.text, {
    font: Object(response) as THREE.Font
} as THREE.TextGeometryParameters);

内部：

let fontLoader = new THREE.FontLoader();    
fontLoader.load('/fonts/my_font.json', response => {

此方法效率非常低，因为字体加载了20次（每个新文本一次）。它减慢了执行速度（在我进行测试时很烦人）。

我想只加载一次字体并将其保存在var中，但我不知道如何等到它被加载以生成TextGeometry。

我猜它与Observables有关系吗？

非常感谢。

Answer 1

例如，您可以这样做：

var manager = new THREE.LoadingManager();
manager.onLoad = function() { // when all resources are loaded
  init();
  render();
}

var font = null;
var loader = new THREE.FontLoader(manager);
loader.load('https://threejs.org/examples/fonts/droid/droid_serif_bold.typeface.json', function(response) {
  font = response;
});

和init()：

function init(){
    // create instances of scene, camera and renderer
    ...
    function setText(text, position) { // actually, here you can have any parameters you want for your text
        textGeo = new THREE.TextGeometry(text, {
            font: font,...
    }
}

主要思想是所有资源首先，其他东西以后。

关于THREE.LoadingManager()。

jsfiddle示例