三.js性能？答案

【问题标题】：Three.js performance?三.js性能？
【发布时间】：2017-08-08 23:48:51
【问题描述】：

我运行了一个非常简单的循环来创建 30 个新的立方体网格：

for(i=0; i<30; i++){
     var zPos = 0 + i * (cubeHeight+ySpace) + cubeHeight/2;
     cube = new THREE.Mesh(new THREE.CubeGeometry(cubeWidth, cubeWidth, cubeHeight), material);
     cube.position.z = zPos;

     cube.castShadow = true;
     cube.recieveShadow = true;
     parent.add(cube);
 }

这运行得非常慢。可能是什么原因？
（我假设我应该能够连续重新渲染 30 个盒子而不会出现性能问题？）

【问题讨论】：

你能把你的完整代码放到jsFiddle吗？
是在每个 animate() 调用中循环还是在初始化时只执行一次？那个巨大的影子，你有多少盏灯？
首先我会尝试这个例子并检查性能：threejs.org/examples/webgl_interactive_cubes.html

标签： performance three.js webgl

【解决方案1】：

我们需要更多细节来完整回答您的问题：

你用的是哪个版本的three.js？
场景中还发生了什么？
您使用的是什么渲染计时器方法？（setInterval、setTimeout 或 requestAnimationFrame）

我对它为什么会慢的猜测：

在这段代码执行之前，其他一些代码段实际上已经用尽了更多时间。
您的渲染调用频率不够高，而且看起来不稳定。
您的电脑不支持three.js的某些功能，正在使用变通方法来弥补。
您的计算机 JavaScript 计时器可能很慢。（取决于平台和浏览器。）
您在没有缓存技术的情况下创建和销毁这些块。（您应该尽可能覆盖旧值而不使用 new 运算符。请求内存在时间上可能很昂贵。）

【讨论】：

我最近遇到了类似的情况 - 寻找导致three.js 性能下降的原因。您在可能的情况下重用内存而不是调用 new 的最后建议立即解决了我的问题。我在一个主要循环中反复创建了一个 Vector3 对象。在将其分配移到循环外，并在使用前在循环内重置其值之后，一切都变得异常快。谢谢！

【解决方案2】：

新的 THREE.CubeGeometry(...);应该在 for 循环之外为所有对象初始化一次，所有立方体只需要 1 个几何图形 -> 因为它们都是相同的，所以您必须共享此几何图形的实例。希望对你有帮助。

【讨论】：

实际上，他应该要么创建单个几何体并对其进行克隆，要么创建单独的几何体。这些不能共享，因为它们的所有属性也将共享并且本质上是同一个多维数据集。但是，您可以共享材料。

【解决方案3】：

您还可以检查您的计算机上运行了多少个 three.js 实例。也许您在后台（也可以在其他浏览器中）从他们的网站运行一些演示。

关闭它们会给你更多的性能。

【讨论】：