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

這是我的動畫功能：

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並以動畫方式調用textbuilder.step() 。 但是，除非您的字體是等寬字體，否則定位可能會成為問題。 否則，您可能必須進一步深入研究FontUtils才能了解在那里的間距，並以某種方式將其應用於textbuilder。