三个 JS - 在循环内的画布上渲染而不更新画布

Question

我有下面的代码，其中包含一些

scans

。我知道这始终是 2880。画布应该将整个 360° 分成 2880 个扇区。下面代码中的循环将始终从 0 运行到 2880，并且在每个循环中，在该区域中渲染一堆（可能是数百个）2px 彩色点，从画布中心向外发出。循环速度很快，在我升级三个包之前，这个循环可以在c中渲染。 15秒。

图片绘制正确，但令我困惑的是，对 THREE 的渲染消息的调用发生在循环内部，但图片在循环的最后一次迭代完成之前什么也没有绘制，然后所有 2880 个扇区同时出现，这这不是我想要的效果。

任何人都可以告诉我我可能会错过什么吗？这是一个不可交互的二维图像。

我尝试过的东西：-

• setTimeout(null, 1000)

  在 .render() 方法之后，使其在执行循环的下一次迭代之前等待
• 考虑将其设为递归函数，并在上面的循环内部进行下一次迭代

  setTimeout

• 逆转三次升级绝对是最后的手段。

我考虑过的事情：-

• 循环运行速度是否快于帧速率两倍，或者没有给屏幕足够的时间来更新？
• 三个J的限制？

const drawReflectivityMap = (scans, reflectivityData, azimuthData, scene, renderer, totalScans, currentScan, cameraPosition, camera, reflectivityColours) => {
    currentCamera = camera;
    currentRenderer = renderer;

    for (let i = 0; i < scans; i++) {
        console.log('Drawing Reflectivity ' + i);
        var reflectivity = reflectivityData[i];
        var azimuth = utils.radians(azimuthData[i]);
        var sinMultiplier = Math.sin(azimuth);
        var cosMultiplier = Math.cos(azimuth);

        var initialRange = mikeUtilities.addRange(mikeUtilities.multiplyRange(mikeUtilities.createRange(0, reflectivity.GateCount, 1), reflectivity.GateSize), reflectivity.FirstGate);
        var x = utils.multiplyRange(initialRange, sinMultiplier);
        var y = utils.multiplyRange(initialRange, cosMultiplier);

        var dataSet = {
            x: x,
            y: y,
            reflectivity: reflectivity
        };

        var reflectivityColourScale = d3.scaleQuantize().domain([-32.0, 94.5]).range(reflectivityColours);
        var pointsMaterial = new THREE.PointsMaterial({
            size: 2,
            vertexColors: true,
            sizeAttenuation: false
        });

        // x co-ordinate points for each point in this arc
        var x = dataSet.x;

        // y co-ordinate points for each point in this arc
        var y = dataSet.y;

        // Reflectivity (rainfall) intensity values for each point in this arc
        var reflectivity = dataSet.reflectivity;

        var geometry = new THREE.BufferGeometry();
        var pointsGraph = [];
        var coloursGraph = [];

        x.forEach(function (index, i) {
            if (reflectivity.MomentDataValues[i] > -33) {
                geometry = new THREE.BufferGeometry();

                var dataPointColour = new THREE.Color(reflectivityColourScale(reflectivity.MomentDataValues[i]));

                pointsGraph.push(x[i], y[i], 0);
                coloursGraph.push(dataPointColour.r, dataPointColour.g, dataPointColour.b);
            }
        });

        var pointsGraphArray = new Float32Array(pointsGraph);
        var coloursGraphArray = new Float32Array(coloursGraph);

        geometry.setAttribute('position', new THREE.BufferAttribute(pointsGraphArray, 3));
        geometry.setAttribute('color', new THREE.BufferAttribute(coloursGraphArray, 3));

        var pointsMap = new THREE.Points(geometry, pointsMaterial);
        scene.add(pointsMap);
        renderScene(scene, cameraPosition, renderer);
    }
}

function renderScene(scene, cameraPosition,renderer) {
    currentCamera.position.z = cameraPosition;
    currentRenderer.render(scene, currentCamera);
    requestAnimationFrame(renderScene);
}

Answer 1

for (let i = 0; i < scans; i++) {
  setTimeout(() => {
    // Your code goes here
  }, i * 100)
}