javascript - Three.js creating geometry and mesh freezes animation -

i trying create scrolling text animation, , add more text animation while running.

this function creating text geometry , mesh:

function createtext(){   textgeo = new three.textgeometry( "some new text 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 animate function:

function animate() {      var fistbox = new three.box3();      requestanimationframe( animate );       for(i = 0; < 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 animation scrolls children of group, , when child leaves screen removed.

the problem when call function creates text geometry , mesh (even without adding group), scroll animation freezes few frames.

i have looked @ web workers, try , "multithread" create function, cannot pass mesh can't use method resolve issue.

any suggestions on how create text geometry , mesh, without effecting animation, appreciated! tia!

you split text chunks (e.g. words mabye letters) , distribute creation of word meshes across frames. 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 position mesh according word length here         parent.add( mesh );     } } 

then create textbuilder , call textbuilder.step() in animate. positioning might issue though, unless font monospace. otherwise you'll have dig further fontutils see how spacing done there, , somehow apply textbuilder.