画布ScreenShot无法正常工作

Question

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

请参阅下面的波纹管以获得更多见解：

ThreeJS示例：

• http://threejs.org/examples/webgl_animation_cloth.html
• http://threejs.org/examples/webgl_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以及Windows 8.1的FireFox上尝试过此操作，但结果却相同

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

Answer 1

我已经找到了解决在我Threejs应用这个问题，解决办法是将作为一个标志设置为true，那么简单，我threejs instanciation我加preserveDrawingBuffer ：

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

而对于使用ThreeJs的模型来说就是这样，因此我认为问题与配置设置有关，使用普通WebGl或其他库必须有一些选择。

感谢您的阅读，希望以后对您有所帮助。