Javascript Three.js toDataUrl空白

当我尝试从three.js WebGl渲染中保存图像时，结果完全为空，但它确实返回大量字符：

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAK8AAADICAYAAACeY7GXAAADt0lEQ…IF4M2+znB4GcgWgDf7OsPhZSBbAN7s6wyHl4FsAXizrzP8AS/TAMmecuTCAAAAAElFTkSuQmCC

我将preserveDrawingBuffer设置为true，如下所示：

 renderer = new THREE.WebGLRenderer( { 
    alpha: true,
    antialias: true,
    preserveDrawingBuffer: true
} );

这就是我调用toDataUrl的方式：

var getImageData = false;
function render() {

            //camera.position.x += ( mouseX - camera.position.x ) * .005;
            //camera.position.y += ( - mouseY - camera.position.y ) * .005;

            camera.lookAt( scene.position );

            renderer.render( scene, camera );
             if(getImageData == true){
                imgData = renderer.domElement.toDataURL("image/png");
                window.setTimeout(10);
                console.log(imgData);
                getImageData = false;
            }
            requestAnimationFrame(render);
        }


           getImageData = true;

下面是画布在渲染为图像之前的外观：

帆布

游说代码

<canvas width="175" height="200" style="width: 175px; height: 200px"></canvas>

---

老实说，我不知道还有什么要说的，除了，关于为什么图像是完全空白的任何想法？render（）函数是代码底部的最后一个函数。

WebGL是一个异步API。因此，您需要在调用

toDataUrl（）

之前添加

gl.finish（）

（这可能会降低性能）调用，或者在下一帧调用它。例如，要执行此操作，可以使用

setTimeout

（您已经做到了，但做得不正确）：

---

我似乎仍然无法用它来渲染图像，我在谷歌上搜索并尝试了几种不同的方法，仍然用各种方法来制作一个空白图像。我只是尝试了一下，它只是说gl、webgl等没有定义。我还尝试了三个.finish（），但也没有成功。@brandoncox try setTimeout。我已经编辑了答案以包含一个代码段。我得到以下错误：[.CommandBufferContext.Offscreen-MainThread-038CA608]渲染警告：没有绑定到该单元的纹理0@brandoncox你有我可以看的页面吗？我把它从100毫秒改为200秒，它工作了，我想100秒的时间不够长，无法加载纹理。谢谢

if(getImageData == true) {
    window.setTimeout(function () {
        imgData = renderer.domElement.toDataURL("image/png");
        console.log(imgData);
    }, 100);
    getImageData = false;
}