1

我运行了一个非常简单的循环来创建 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 个盒子而不会出现性能问题？）

4

3 回答 3

4

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

  • 您使用的是哪个版本的three.js？

  • 现场还有什么情况？

  • 您使用的是什么渲染计时器方法？（setInterval、setTimeout 或 requestAnimationFrame）

我对为什么它可能很慢的猜测：

  • 在此代码执行之前，其他一些代码部分实际上已经占用了更多时间。

  • 您的渲染没有被足够频繁地调用，而且看起来很不稳定。

  • 您的计算机不支持three.js的某些功能，它正在使用解决方法来弥补它。

  • 您的计算机 javascript 计时器可能很慢。（取决于平台和浏览器。）

  • 您在没有缓存技术的情况下创建和销毁这些块。（您应该尽可能不使用 new 运算符覆盖旧值。请求内存在时间上可能很昂贵。）

于 2013-06-28T04:00:38.003 回答
3

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

于 2013-06-21T16:04:38.527 回答
0

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

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

于 2017-08-08T15:48:51.127 回答