当我尝试从 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 的样子:
Canvas 代码
<canvas width="175" height="200" style="width: 175px; height: 200px"></canvas>
老实说,除了关于为什么图像完全空白的任何想法之外,我不知道还能说什么? render() 函数是代码底部的最后一个函数。
最佳答案
WebGL 是一个异步 API。因此,您需要在调用 toDataUrl()
之前添加 gl.finish()
(这可能会降低性能)调用,或者在下一帧调用它。为此,您可以使用 setTimeout
(您已经这样做了,但做得不正确):
if(getImageData == true) {
window.setTimeout(function () {
imgData = renderer.domElement.toDataURL("image/png");
console.log(imgData);
}, 100);
getImageData = false;
}
关于javascript - 三.js toDataUrl 空白,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37621564/