Three.js creating geometry and mesh freezes animation

Question

I am trying to create a scrolling text animation, and add more text to the animation while it is running.

This is my function for creating the text geometry and mesh:

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

And this is my animate function:

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

  }

Basically the animation scrolls all the children of the group, and when the child leaves the screen it is removed.

The problem is that when I call the function that creates the text geometry and mesh (even without adding it to the group), the scroll animation freezes for a few frames.

I have looked at Web Workers, to try and "multithread" the create function, but it cannot pass back the mesh so I can't use that method to resolve the issue.

Any suggestions on how to create the text geometry and mesh, without effecting the animation, would be greatly appreciated! TIA!

morris4 morris4 · Accepted Answer · 2015-07-17T13:08:31

You could split your text into chunks (e.g. words are mabye letters) and distribute the creation of word meshes across frames. Something like

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

then create a textbuilder and call textbuilder.step() in animate. The positioning might be an issue though, unless your font is monospace. Otherwise you'll probably have to dig further into FontUtils to see how spacing is done there, and somehow apply that to the textbuilder.

Three.js creating geometry and mesh freezes animation

1 Answers