Three.js截图没有希望了吗？修复图片空白的方法！

2023-06-23 19:30:51

修复 Three.js 截图空白问题：启用 preserveDrawingBuffer

简介

Three.js 是一个强大的 JavaScript 库，可用于创建和渲染引人入胜的 3D 图形。虽然它提供了一系列高级功能，但有时可能会遇到屏幕截图空白的情况。本文将深入探讨如何使用 preserveDrawingBuffer 属性解决此问题，并提供详细的分步指南和示例。

什么是 preserveDrawingBuffer 属性？

preserveDrawingBuffer 是一个 WebGL 上下文属性，它控制渲染缓冲区是否在每次渲染循环后保存为图像。默认情况下，Three.js 不会保存渲染缓冲区，这会导致屏幕截图空白。启用此属性可解决此问题。

启用 preserveDrawingBuffer

要启用 preserveDrawingBuffer 属性，您可以在创建 WebGL 上下文时将其设置为 true。以下是如何在 Three.js 中执行此操作：

const canvas = document.querySelector('canvas');
const renderer = new THREE.WebGLRenderer({ canvas: canvas, preserveDrawingBuffer: true });

获取屏幕截图

启用 preserveDrawingBuffer 后，您可以使用 WebGLRenderingContext.readPixels() 方法获取渲染缓冲区。以下是如何在 Three.js 中执行此操作：

const pixels = new Uint8Array(width * height * 4);
renderer.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, pixels);

导出屏幕截图

获取渲染缓冲区后，您可以将其导出为图像文件。以下是如何在 Three.js 中执行此操作：

const imageData = new ImageData(pixels, width, height);
const canvas = document.createElement('canvas');
canvas.width = width;
canvas.height = height;
const context = canvas.getContext('2d');
context.putImageData(imageData, 0, 0);

const dataURL = canvas.toDataURL('image/png');

代码示例

以下是使用 preserveDrawingBuffer 属性修复 Three.js 屏幕截图空白问题的完整代码示例：

const canvas = document.querySelector('canvas');
const renderer = new THREE.WebGLRenderer({ canvas: canvas, preserveDrawingBuffer: true });

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, canvas.clientWidth / canvas.clientHeight, 0.1, 1000);

const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

camera.position.z = 5;

function render() {
  requestAnimationFrame(render);

  renderer.render(scene, camera);
}

render();

document.querySelector('button').addEventListener('click', () => {
  const pixels = new Uint8Array(width * height * 4);
  renderer.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, pixels);

  const imageData = new ImageData(pixels, width, height);
  const canvas = document.createElement('canvas');
  canvas.width = width;
  canvas.height = height;
  const context = canvas.getContext('2d');
  context.putImageData(imageData, 0, 0);

  const dataURL = canvas.toDataURL('image/png');
});