I'm working on a ThreeJS project where there is a text tunnel, created by generating text objects with TextGeometry, and moving them along the z axis continuously. The objects are generated dynamically. I use 30 at a time with a circular buffer.
For some reason, I get a good FPS (around 60 or more), but it varies a lot. There are drops in FPS every 5-10 seconds or so. I've tested the code in several conditions (i.e. not using other elements like other objects, video capture, cam movement, etc.) and I am pretty sure the moving text objects are the cause of drop in FPS.
Ideas?
ThreeJS update function:
function update()
{
bookidx = bookidx % book.length;
// FLOATING TEXT
if (stepsFloating++ % floatingWordsRate == 0 && makeFloatingWords){
addFloatingText(book[bookidx], scene);
}
else{
floatingWords.move();
}
// TUNNEL TEXT
// move sentences forward
for (t in tunnelWords.tokens){
tunnelWords.tokens[t][1].position.z += 120;
}
// get another sentence
if (tunnelWords.tokens[0][1].position.z > -2000){
addTunnelText(book[bookidx++], scene);
}
// KEYBOARD
keyboardUpdate();
// CONTROLS AND STATS
controls.update();
stats.update();
}
This creates the object (I intentionally use a high bevel thickness for the effect, decreasing it or not using it at all did not make a difference:
function makeTextMeshForTunnel(word){
var textGeom = new THREE.TextGeometry( word ,
{
size: 22, height: 1, curveSegments: 1,
font: "helvetiker", weight: "normal", style: "normal",
bevelThickness: 900, bevelSize: 2, bevelEnabled: true,
material: 1, extrudeMaterial: 0
});
// font: helvetiker, gentilis, droid sans, droid serif, optimer
// weight: normal, bold
var textMesh = new THREE.Mesh(textGeom, tunnel_textMaterial );
textGeom.computeBoundingBox();
var textWidth = textGeom.boundingBox.max.x - textGeom.boundingBox.min.x;
textMesh.position.set( -0.5 * textWidth, 0, -3000 );
textMesh.rotation.x = TUNNEL_TEXT_X_ROTATION;
return textMesh;
}
