Three.js渲染场景导出图片时对象偏移问题求助

参考图片 #

用户视图 #

注：忽略图中的工具栏，它是独立覆盖层，不属于Canvas内容。

导出图片 #

问题详情 #

我写了一个导出当前Three.js Canvas为图片的函数，但遇到了奇怪的问题：用户视图里的对象明明是居中的，导出后的图片里对象却偏向右上角。我猜测可能和viewport设置有关，但试了调整没效果，下面是我的导出函数代码：

exportImageWithBg(bgType, resolution = '8K') {
  const resolutions = {
    '1K': { width: 1280, height: 720 },
    '2K': { width: 2048, height: 1080 },
    '4K': { width: 3840, height: 2160 },
    '8K': { width: 7680, height: 4320 },
  };

  const { width, height } = resolutions[resolution];
  const fileName = `export_${resolution}_${Date.now()}.png`;

  const renderer = this.renderer;
  const scene = this.scene;
  const originalCamera = this.camera;

  // Preserve original settings
  const originalBg = scene.background;
  const originalRenderTarget = renderer.getRenderTarget();
  const originalViewport = renderer.getViewport(new THREE.Vector4());

  // Set background
  switch (bgType) {
    case 'white':
      scene.background = new THREE.Color(0xffffff);
      break;
    case 'dark':
      scene.background = new THREE.Color(0x000000);
      break;
    case 'transparent':
      scene.background = null;
      renderer.setClearColor(0x000000, 0);
      break;
  }

  // Clone and configure camera for correct aspect ratio
  const exportCamera = originalCamera.clone();
  exportCamera.aspect = width / height;
  exportCamera.updateProjectionMatrix();
  exportCamera.position.copy(originalCamera.position);
  exportCamera.quaternion.copy(originalCamera.quaternion);
  exportCamera.updateMatrixWorld(true);

  // Render target
  const renderTarget = new THREE.WebGLRenderTarget(width, height, {
    format: THREE.RGBAFormat,
    type: THREE.UnsignedByteType,
    colorSpace: THREE.SRGBColorSpace,
  });

  // Render offscreen
  renderer.setRenderTarget(renderTarget);
  console.log(renderTarget);
  // renderer.setViewport(0, 0, width, height);
  // renderer.setViewport(0, 0, width * 2, height * 2);
  renderer.setViewport(0, 0, width, height);
  renderer.render(scene, exportCamera);

  // Extract pixels
  const buffer = new Uint8Array(width * height * 4);
  renderer.readRenderTargetPixels(renderTarget, 0, 0, width, height, buffer);

  // Copy to canvas
  const canvas = document.createElement('canvas');
  canvas.width = width;
  canvas.height = height;
  const ctx = canvas.getContext('2d');
  const imageData = ctx.createImageData(width, height);

  for (let y = 0; y < height; y++) {
    for (let x = 0; x < width; x++) {
      const srcIdx = (y * width + x) * 4;
      const dstIdx = ((height - y - 1) * width + x) * 4;
      imageData.data[dstIdx] = buffer[srcIdx];
      imageData.data[dstIdx + 1] = buffer[srcIdx + 1];
      imageData.data[dstIdx + 2] = buffer[srcIdx + 2];
      imageData.data[dstIdx + 3] = buffer[srcIdx + 3];
    }
  }

  ctx.putImageData(imageData, 0, 0);

  // Trigger download
  const link = document.createElement('a');
  link.href = canvas.toDataURL('image/png');
  link.download = fileName;
  link.click();

  // Cleanup and restore
  renderTarget.dispose();
  scene.background = originalBg;
  renderer.setRenderTarget(originalRenderTarget);
  renderer.setViewport(originalViewport);
}

解决方案 #

这个偏移问题主要是渲染目标参数和原渲染器不匹配，以及相机克隆时的细节遗漏导致的，试试以下几个修改：

1. 同步渲染目标的像素比 #

创建WebGLRenderTarget时，必须和原渲染器的pixelRatio保持一致，否则会出现缩放偏移：

const renderTarget = new THREE.WebGLRenderTarget(width, height, {
  format: THREE.RGBAFormat,
  type: THREE.UnsignedByteType,
  colorSpace: THREE.SRGBColorSpace,
  pixelRatio: renderer.getPixelRatio() // 添加这行，同步像素比
});

2. 完善相机克隆参数 #

克隆相机时，除了宽高比，还要同步近/远裁剪面参数，避免投影矩阵计算偏差：

const exportCamera = originalCamera.clone();
exportCamera.aspect = width / height;
// 同步原相机的近远裁剪面
exportCamera.near = originalCamera.near;
exportCamera.far = originalCamera.far;
exportCamera.updateProjectionMatrix();
exportCamera.position.copy(originalCamera.position);
exportCamera.quaternion.copy(originalCamera.quaternion);
exportCamera.updateMatrixWorld(true);

3. 优化像素读取流程（可选） #

你手动循环拷贝像素容易出错，用纹理转图片的方式更简单可靠，同时自动处理Y轴翻转：

// 替换原有的"Extract pixels"和"Copy to canvas"部分代码
const canvas = document.createElement('canvas');
canvas.width = width;
canvas.height = height;
const ctx = canvas.getContext('2d');

const image = new Image();
image.onload = () => {
  ctx.scale(1, -1); // 翻转Y轴，匹配Three.js的坐标系
  ctx.drawImage(image, 0, -height);
  
  // 触发下载
  const link = document.createElement('a');
  link.href = canvas.toDataURL('image/png');
  link.download = fileName;
  link.click();
};
image.src = renderTarget.texture.toDataURL();

4. 规范渲染前的视图设置 #

渲染到离屏目标前，先清除画布，确保没有残留内容：

renderer.setRenderTarget(renderTarget);
renderer.setViewport(0, 0, width, height);
renderer.clear(); // 添加清除操作
renderer.render(scene, exportCamera);

把这些修改整合到你的函数里，应该就能解决对象偏移的问题了。

内容的提问来源于stack exchange，提问作者Ammad