Question

我正在使用Three.js制作一个应用程序，以创建文本几何并将其添加到场景中，我传递了一个函数。但是，我可以多次执行此操作，并且创建了一种方法来迭代场景中的所有网格并执行一些视觉更改。我的问题是，我怎么知道所有异步调用都已完成并且所有网格都已添加到场景中，这样当我调用我的方法并遍历场景中的所有网格时，所有网格都已成功添加？ / p>

例如

/* Create the scene Text */
let loader = new THREE.FontLoader();
loader.load('fonts/helvetiker_regular.typeface.json', font => {
    /* Create the geometry */
    let geometry_text = new THREE.TextGeometry("example text");

    /* Currently using basic material because I do not have a light, Phong will be black */
    let material_text = new THREE.MeshBasicMaterial();

    let textMesh = new THREE.Mesh(geometry_text, material_text);
    scene.add(textMesh);  // <---------- Adds the mesh to the scene

});

fade_meshes_into_scene();      // <------- iterates over all meshes in scene.

在此示例中，由于fade_meshes_into_scene在场景中的所有网格上进行迭代，因此它将不起作用，并且在这种情况下，场景将没有网格，因为在调用scene.add(textMesh)之前已调用了该场景。但是，当我只执行一次时，就可以将其移入异步调用中，但是当我添加多个文本和不同的异步调用时，它将无法正常工作。

如何知道何时添加了所有网格物体，以便知道何时调用 fade_meshes_into_scene？

Answer 1

我建议您将字体加载变为Promises。然后，您可以使用Promise.all来保证数组中的所有promise在执行传递给then！的函数之前都已解析！。

const loadFont = fontPath => {
  return new Promise(res => {
    loader.load(fontPath, font => {
      // do loading things
      scene.add(textMesh);
      res();
    });
  });
}

const font1 = loadFont('font-path-1.json'); // Promise for first font
const font2 = loadFont('font-path-2.json'); // Promise for second font

Promise.all([font1, font2]).then(() => {
  fade_meshes_into_scene();  
})

当我知道所有异步调用都已完成时，如何运行回调？

1 个答案: