three.js - 在 WebGLrenderer 中同时使用 autoclear 和 preserveDrawingBuffer

Question

我有一个 Three.js 场景，我在其中设置了渲染器的 preserveDrawingBuffer:true 因为我想使用 renderer.toDataURL 来拍摄画布上的内容，我还使用 renderer.autoClear = false 因为我使用了 2 个场景每个都有一台相机（当然是一个渲染器）。

问题是，当我使用 orbitControls 移动相机时，对象不会按应有的动画效果，它们以前的状态保留在画布上，并且由于 preserveDrawingBuffer:true 设置，它们正在创建丑陋的绘画（它们没有被擦除）。

我该怎么做才能同时拥有 2 个场景/摄像机和轨道控制的快照功能？

谢谢你。

Answer 1

如果您要像这样实例化WebGLRenderer并保留绘图缓冲区：

var renderer = new THREE.WebGLRenderer( { preserveDrawingBuffer: true } );

如果你正在设置

renderer.autoClear = false;

您必须renderer.clear()在渲染之前调用，如下所示：

renderer.clear();
renderer.render( scene, camera );

三.js r.69