js创建几何和网格冻结动画

Question

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

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

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 );
}

这是我的animate函数:

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();
  }

基本上，动画滚动组的所有子元素，当子元素离开屏幕时，它被移除。

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

我看过Web Workers，尝试"多线程"创建函数，但它不能传递回网格，所以我不能使用该方法来解决问题。

任何关于如何创建文本几何和网格，而不影响动画的建议，将不胜感激!蒂娅!

Answer 1

你可以将你的文本分割成块(例如单词可能是字母)，并将单词网格的创建分布到不同的帧中。就像

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()。定位可能是个问题，除非你的字体是等宽字体。否则，您可能需要深入研究FontUtils以了解那里的间距是如何完成的，并以某种方式将其应用于textbuilder。