画布ScreenShot不工作

Question

不久前，我能够使用函数从我的webGL 3D模型中获取屏幕快照，但是突然这个停止了的工作，现在我无法从任何 3D模型获得一张图像。

关于更多的见解，请看下面的内容：

ThreeJS示例：

• cloth.html
• buffergeometry.html

WebGL示例：

• http://madebyevan.com/webgl-water/

基本例子：

• http://stemkoski.github.io/Three.js/HelloWorld.html
• http://learningwebgl.com/lessons/lesson01/index.html

在前面的所有例子中，我没有得到图像，我得到了一个黑色或透明的图像

2D：

• http://jsfiddle.net/m7sA9/show/

只有2D示例才返回正确的图像。

在前面的所有例子中，我使用这个简单的方法来获取图像。

document.getElementsByTagName('canvas')[0].toDataURL();

知道我做错了什么吗？

我在MacBook Pro: Chrome和FireFox上，以及在Windows8.1上的FireFox上尝试过这个，我得到了同样的结果。

以下是我如何在Chrome上进行测试的动画

​

​

Answer 1

我在我的Threejs应用程序中找到了解决这个问题的方法，解决方案就像把一个标志变为true一样简单，所以在我的三个实例化中添加了preserveDrawingBuffer：

var renderer   = new THREE.WebGLRenderer({
  preserveDrawingBuffer   : true   // required to support .toDataURL()
});

这就是使用ThreeJ的模型，所以我认为问题与配置设置有关，必须有一些选项可以使用普通的WebGl或其他库。

谢谢你的阅读，希望这能对将来的人有所帮助。