Javascript three.js大量网格优化

我想使用three.js渲染包含许多小网格的场景，以创建一些堆栈

这是一把小提琴：

我希望你们能帮我优化这段代码。正如你所看到的，它有点滞后，因为FPS低。我刚刚快速编写了这段代码，我知道在for循环中创建材质和网格是一种糟糕的做法。我需要知道的是：如何深入优化这个场景，而不仅仅是做一些基本的技术，比如在循环之外创建材质和网格

我尝试使用“网格比例”的属性，但结果非常糟糕，因为没有“堆栈”效果。我也尝试过使用

mesh.copy

，但结果还是一样的

---

感谢

慢速fps并不直接取决于材料的数量。您会注意到，即使您将

getRandomColor（）

更改为

0x00ff00

fps也保持不变。我看不到JSFIDLE，只是我看到了一个空白屏幕。您说得对，但它仍然会导致性能略有下降。不管怎样，你有什么想法来优化这段代码吗？Careen，很抱歉，这个JSFIDLE似乎正在工作，也许可以用另一个浏览器试试？@Careen将

添加到HTML部分，并将其从JSFIDLE

外部资源中删除
您有2500个圆柱体和16*6=96个离散颜色（即材质），因此您不必使用
getRandomColor（）
但是创建一个材质数组并索引到其中。我仍然不认为这是瓶颈。