当我尝试从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;
以下是画布在渲染到图像之前的样子:
CanvasCode
<canvas width="175" height="200" style="width: 175px; height: 200px"></canvas>
老实说,我不知道还有什么可说的,关于为什么图像会变成完全空白的任何想法? render()函数是代码底部的最后一个东西。
答案 0 :(得分:0)
WebGL是一种异步API。因此,您需要在调用y_
之前添加gl.finish()
(这可能会使性能恶化),或者在下一帧调用它。为此,您可以使用toDataUrl()
(您已经这样做,但做错了):
setTimeout