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

这是我的动画功能：

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，尝试“多线程”创建函数，但它无法传回网格，所以我无法使用该方法来解决问题。

如何在不影响动画的情况下创建文本几何体和网格的任何建议将不胜感激！ TIA！

Answer 1

您可以将文本拆分为块（例如，单词是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.step()。但是，定位可能是一个问题，除非您的字体是等宽字体。否则你可能需要进一步深入FontUtils以了解间距是如何完成的，并以某种方式将其应用于文本构建器。

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

1 个答案: