Threejs FPS 与文本对象答案

【问题标题】：Threejs FPS with text objectsThreejs FPS 与文本对象
【发布时间】：2014-05-12 02:45:50
【问题描述】：

我正在开发一个 ThreeJS 项目，其中有一个文本隧道，通过使用 TextGeometry 生成文本对象并沿 z 轴连续移动它们来创建。对象是动态生成的。我一次使用 30 个循环缓冲区。

出于某种原因，我获得了不错的 FPS（大约 60 或更多），但变化很大。每 5-10 秒左右就会出现 FPS 下降。我已经在几种情况下测试了代码（即不使用其他元素，如其他对象、视频捕获、凸轮移动等），我很确定移动的文本对象是导致 FPS 下降的原因。

想法？

ThreeJS 更新函数：

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

这会创建对象（我故意使用高斜面厚度来获得效果，减少它或根本不使用它并没有什么不同：

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

【问题讨论】：

标签： animation text three.js frame-rate

【解决方案1】：

这有帮助，似乎 textGeometry 比其他几何图形更昂贵，这有助于理解建议解决方案的问题：

https://github.com/mrdoob/three.js/issues/1825

【讨论】：