Three.js 尝试在for循环的每次迭代中强制渲染三个.js几何体

我刚刚开始使用three.js。我使用在three.js主网站上找到的代码片段组装了一个测试

我有一堆几何体（球体）代表粒子，它们的位置在一个循环中改变，根据我建立的方程。 我试图通过这种代码呈现每次迭代：

function simulate() {
    for (var j = 0 ; j < Nb ; j++ ) {           
        // update the geometries positions
        ...
        render();
    }
}

实际上，如果我在我的chrome浏览器的javascript控制台中一步一步地进行，渲染就会发生

因此，我尝试更改代码，以便在循环中使用

requestAnimationFrame

，这样：

function simulate() {
    for (var j = 0 ; j < Nb ; j++ ) {           
        this.internalRenderingLoop = function() {
            // update the objects shapes and locations
            ...
            render();
            requestAnimationFrame( this.internalRenderingLoop );
        }
    }
}

函数模拟（）{
对于（var j=0；j

但它也不起作用。显然，

requestAnimationFrame

的两个调用之间存在冲突，导致

Uncaught错误：TYPE\u MISMATCH\u ERR:DOM异常17

---

所以问题是：有没有办法在我的

simulate

函数中的每次迭代中强制渲染，或者我是否需要重构代码，以便在

animate

或

render

函数中执行每次更新几何体位置的调用？

您的上一个函数就快到了。在for循环中，您只是覆盖internalrendering循环函数，而没有对其执行更改。此外，如果在形状更新代码中使用j变量，则需要以稍微不同的方式增加它。像这样的东西怎么样（未经测试，但你知道了）：

您根本不需要animate（）函数，因为您已经在simulate（）中进行了动画制作

您的模拟速度也将取决于帧速率，因此为了更好地控制模拟速度，您可以将最后一行函数替换为以下内容：

window.setTimeout( function() { requestAnimationFrame(simulate); }, 1000 / 25);

---

这应该以大约25 FPS的速度运行。

但是我仍然可以使用

动画

吗？因为我希望能够使用鼠标移动围绕模拟的最终结果旋转。我认为最好让所有内容都在同一个渲染循环函数中，不管它叫什么（动画或模拟，无所谓）。您可以将模拟代码移动到animate（），而不是

if（j==Nb）{return；}

do

if（j

var j = 0; // need to be outside function to have proper scope
function simulate() {
  j++;
  if (j == Nb) { return; } // stop

  // update the objects shapes and locations

  render();
  requestAnimationFrame(simulate);      
}

window.setTimeout( function() { requestAnimationFrame(simulate); }, 1000 / 25);