Three.js中Camera.setViewOffset结合Reflector致反射纹理拉伸问题

云原生阿岚

2026-6-26

使用camera.setViewOffset时Reflector与Water2的反射异常修复

问题现象

Reflector：x轴偏移值过大时反射纹理拉伸，y轴偏移无此问题
Water2：反射纹理不拉伸，但偏移方向与主场景相反

Reflector纹理拉伸修复

Reflector内部的渲染相机未同步主相机的viewOffset设置，导致投影矩阵计算错误。直接同步偏移参数即可解决：

修改你的setViewOffset函数，在设置主相机偏移后，同步更新Reflector的内部相机：

function setViewOffset () {
  camera.setViewOffset(
    window.innerWidth,
    window.innerHeight,
    offset.x,
    offset.y,
    window.innerWidth,
    window.innerHeight
  );
  // 同步Reflector相机的viewOffset
  groundMirror.camera.setViewOffset(
    window.innerWidth,
    window.innerHeight,
    offset.x,
    offset.y,
    window.innerWidth,
    window.innerHeight
  );
  render();
}

Water2反射反向偏移修复

Water2的反射相机默认对主相机做镜像处理，但未同步viewOffset的偏移方向。将反射相机的x偏移取反即可修正：

修改你的setViewOffset函数，添加反射相机的偏移修正：

function setViewOffset () {
  camera.setViewOffset(
    window.innerWidth,
    window.innerHeight,
    offset.x,
    offset.y,
    window.innerWidth,
    window.innerHeight
  );
  // 修正Water2反射相机的偏移方向
  water.reflectorCamera.setViewOffset(
    window.innerWidth,
    window.innerHeight,
    -offset.x, // x偏移取反
    offset.y,
    window.innerWidth,
    window.innerHeight
  );
  render();
}