javascript - 删除和添加 TextGeometry 会卡住场景

Question

我正在尝试在文本几何的帮助下创建一个时钟。为了更新时间，我需要更新文本几何中的文本，这可以通过删除并重新创建新的文本几何来完成。

每次我添加新的文本几何图形时，它都会卡住我的浏览器:

 // Remove old mesh
  earthClockMesh.geometry.dispose();
  earthClockMesh.material.dispose();
  group.remove(earthClockMesh);


   //add new mesh
  earthClockMesh = this.getTextMesh(
    new Date(diluatedTime).toLocaleString(),
    textMaterial
  );
  group.add(earthClockMesh);

任何人都知道我们可以在不卡住浏览器的情况下更新文本几何中的文本的更好方法。

实例

https://codesandbox.io/s/peaceful-boyd-x859m

您可以看到当 TextGeometry 更改时粒子会卡住一会儿

Answer 1

使用 THREE.TextBufferGeometry 将提高性能，因为它产生的对象分配比 TextGeometry 少得多。此外，THREE.Geometry 的每个实例在第一次渲染之前都会在内部转换为 THREE.BufferGeometry。如果您另外减少 curveSegments 的数量，则几乎不会再出现明显的滞后。

三.js R107