javascript – 如何在three.js中切换preserveDrawingBuffer?

前端之家收集整理的这篇文章主要介绍了javascript – 如何在three.js中切换preserveDrawingBuffer?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
基本上,我想要设置我可以去saveDrawingBuffer = true,渲染场景一次,抓住截图,然后回去.但是,这会带来两个问题:

>渲染器中没有方法可以处理所有缓冲区,
>如果我这样做,画布会变黑

renderer = new THREE.WebGLRenderer({canvas:renderer.domElement,preserveDrawingBuffer:true});

我该怎么做呢?

编辑:我没有找到切换这个的方法,所以我不得不克隆场景并创建第二个渲染器来制作屏幕截图.见https://github.com/mrdoob/three.js/issues/189

解决方法

你不需要preserveDrawingBuffer:true来截取屏幕截图.您需要的是在渲染后立即拍摄屏幕截图.只要您在渲染后但在退出当前事件之前拍摄,屏幕截图就可以正常工作.

因此,例如,这将始终有效

renderer.render( scene,camera );
var screenshot = renderer.domElement.toDataURL();

然而,如果你运气的话,这只能随机工作

someElement.addEventListener('click',function() {
   // this is not immediately after rendering. you have no
   // idea when it is relative to rendering.
   var screenshot = renderer.domElement.toDataURL();
});

大多数THREE.js示例都有渲染功能,如果您需要在用户请求截屏时截取屏幕截图

someElement.addEventListener('click',function() {
   render();
   var screenshot = renderer.domElement.toDataURL();
});

或者你可以做到这一点

var takeScreenshot;

function render() {
   ...
   if (takeScreenshot) {
     takeScreenshot = false;
     var screenshot = renderer.domElement.toDataURL();
   }
}

someElement.addEventListener('click',function() {
   takeScreenshot = true;
});

或者任何其他方法,以确保您在渲染后立即获取屏幕截图.

原文链接:https://www.f2er.com/js/151148.html

猜你在找的JavaScript相关文章