javascript - 为什么在Threejs渲染函数中进行while循环而不更新每一帧？

我有一个8个立方体的数组，都高1px。按下按钮后，它们将使用while循环补间到新的目标高度，如下所示：

if (buttonHit) {
    console.log('button hit')
    for (i in meshArray) {
        while (Math.abs(meshArray[i].scale.y - newList[i].cost)>5) {
            console.log(meshArray[3].scale.y)
            meshArray[i].scale.y += .3
        }
    }
    buttonHit = false;
}

控制台日志显示的是，meshArray [3]连续保持1px 1215次，然后添加.3，然后停止，但是一旦完成，网格就会弹出到其目标高度。

while循环在render（）中不起作用吗？

最佳答案

问题在于，对于需要渲染的每个帧，都会调用一次render。您在一帧内完成所有更改。 threejs从来没有机会重绘任何内容。

您需要做的是每次调用渲染将高度仅更改.3一次。即没有循环。

有点像这样：

function render() {

    if (buttonHit) {
        new_height = 2;
        buttonHit = false;
    }

    if (meshArray[i].scale.y < new_height) {
        meshArray[i].scale.y +=.3
    }

}

关于javascript - 为什么在Threejs渲染函数中进行while循环而不更新每一帧？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/39619454/