title: Three.js creating geometry and mesh freezes animation
body: <p>I am trying to create a scrolling text animation, and add more text to the animation while it is running.</p>
  
  <p>This is my function for creating the text geometry and mesh:</p>
  
  <pre><code>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 );
  }
  </code></pre>
  
  <p>And this is my animate function:</p>
  
  <pre><code>function animate() {
  
      var fistBox = new THREE.Box3();
  
      requestAnimationFrame( animate );
  
  
      for(i = 0; i &lt; group.children.length; i++){
        group.children[i].position.x -= 2;
      }
  
      fistBox.setFromObject(group.children[0]);
  
      if(group.children[0].position.x &lt; ((window.innerWidth / 2) * -1) - fistBox.size().x ){
        scene.remove( group.children[0] );
      }
  
      render();
  
    }
  </code></pre>
  
  <p>Basically the animation scrolls all the children of the group, and when the child leaves the screen it is removed.</p>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>Any suggestions on how to create the text geometry and mesh, without effecting the animation, would be greatly appreciated! TIA!</p>