Javascript Three.js创建几何体和网格冻结动画

我试图创建一个滚动文本动画，并在动画运行时向动画添加更多文本

这是我创建文本几何体和网格的函数：

function createText(){
  textGeo = new THREE.TextGeometry( "Some new text that as quite long", {

    size: 20,
    height: height,
    font: font

  });

  textMesh1 = new THREE.Mesh( textGeo, new THREE.MeshBasicMaterial( { color: 0x112358 } ) );

  textMesh1.position.x = (window.innerWidth / 2) + 100;
  textMesh1.position.y = ((window.innerHeight / 2) * -1) + 40;
  textMesh1.position.z = 0;

  textMesh1.rotation.x = 0;
  textMesh1.rotation.y = 0;

  group.add( textMesh1 );
}

这是我的动画功能：

function animate() {

    var fistBox = new THREE.Box3();

    requestAnimationFrame( animate );


    for(i = 0; i < group.children.length; i++){
      group.children[i].position.x -= 2;
    }

    fistBox.setFromObject(group.children[0]);

    if(group.children[0].position.x < ((window.innerWidth / 2) * -1) - fistBox.size().x ){
      scene.remove( group.children[0] );
    }

    render();

  }

function animate（）{
var fistBox=new THREE.Box3（）；
请求动画帧（动画）；
对于（i=0；i

基本上，动画会滚动组中的所有子对象，当该子对象离开屏幕时，它将被删除

问题是，当我调用创建文本几何体和网格的函数时（即使没有将其添加到组中），滚动动画会冻结几帧

我看过Web Workers，尝试“多线程”创建函数，但它无法传回网格，因此我无法使用该方法解决问题

---

对于如何在不影响动画的情况下创建文本几何体和网格的任何建议，我们将不胜感激！蒂亚

您可以将文本分割成块（例如，单词是mabye字母），并将单词网格的创建分布到各个框架中。差不多

function TextBuilder( text, opts, parent ) {
    this.words = text.split( /\s/g );
    this.index = 0;
    this.step = function () {
        if ( this.index >= this.words.length ) return;

        var word = this.words[ this.index ];
        ++this.index;
        var geo = new THREE.TextGeometry( word, opts );
        var mesh = new THREE.Mesh( geo, opts.material );
        // need to position mesh according to word length here
        parent.add( mesh );
    }
}

然后创建一个textbuilder并在animate中调用

textbuilder.step（）

。但是定位可能是个问题，除非您的字体是单空格。否则，您可能需要进一步深入了解间距是如何实现的，并以某种方式将其应用于textbuilder