Three.js toDataUrl 空白

Question

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

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 在渲染到图像之前的样子：

Canvas

Canvas代码

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

老实说，我不知道还能说些什么，关于为什么图像完全空白的任何想法？ render() 函数是代码底部的最后一个东西。

Answer 1

WebGL 是异步的API。因此，您需要在调用 toDataUrl() 之前添加 gl.finish() （这会降低性能）调用或在下一帧调用它。为此，您可以使用 setTimeout（您有，但操作不正确）：

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

Three.js toDataUrl 空白

Three.js toDataUrl blank

javascript

getimagedata

webgl

three.js