I'm currently working on developing a text animation that scrolls and dynamically adds more content as it runs.
Here is the function I have created for generating the text geometry and mesh:
function createText(){
textGeo = new THREE.TextGeometry( "Insert long, new text here", {
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 );
}
Below is the animate function I am using:
function animate() {
var firstBox = new THREE.Box3();
requestAnimationFrame( animate );
for(i = 0; i < group.children.length; i++){
group.children[i].position.x -= 2;
}
firstBox.setFromObject(group.children[0]);
if(group.children[0].position.x < ((window.innerWidth / 2) * -1) - firstBox.size().x ){
scene.remove( group.children[0] );
}
render();
}
Essentially, this animation scrolls through all the children of the group and removes them once they exit the screen.
The issue arises when I call the function to generate the text geometry and mesh (even without adding it to the group), causing the scroll animation to freeze briefly.
I've explored Web Workers as a potential solution to separate the creation process from the animation itself. However, since Web Workers cannot return the mesh object, this method doesn't address the problem effectively.
If anyone has suggestions on how to create the text geometry and mesh seamlessly without impacting the animation, I would greatly appreciate it! Thank you in advance!