Three.js toDataUrl空白

时间:2016-06-03 18:53:49

标签: javascript three.js webgl getimagedata

当我尝试从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

CanvasCode

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

老实说,我不知道还有什么可说的,关于为什么图像会变成完全空白的任何想法? render()函数是代码底部的最后一个东西。

1 个答案:

答案 0 :(得分:0)

WebGL是一种异步API。因此,您需要在调用y_之前添加gl.finish()(这可能会使性能恶化),或者在下一帧调用它。为此,您可以使用toDataUrl()(您已经这样做,但做错了):

setTimeout