ThreeJS中使用WebGlRenderer.setViewport时视口区域错误求助

当Canvas处于非全屏的网格布局时，Three.js的ViewHelper会因默认假设Canvas占满整个视口，导致viewport计算错误，出现万向环被裁切或位置偏移的问题。核心原因是ViewHelper未考虑Canvas在页面中的偏移、CSS缩放以及设备像素比的影响。

解决方案 #

分为修正渲染视口位置和修正鼠标事件坐标转换两个核心部分：

1. 移除ViewHelper默认鼠标事件监听

初始化ViewHelper后，先移除它自带的全局鼠标事件监听，避免和自定义处理逻辑冲突：

import { ViewHelper } from "three/examples/jsm/helpers/ViewHelper";

const canvas = document.querySelector('.webgl');
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const helper = new ViewHelper(camera, canvas);

// 移除默认全局监听
window.removeEventListener('mousemove', helper.handleMouseMove);
window.removeEventListener('mousedown', helper.handleMouseDown);
window.removeEventListener('mouseup', helper.handleMouseUp);

2. 自定义鼠标事件坐标转换

监听全局鼠标事件，将页面坐标转换为Canvas的设备像素坐标后，再传递给ViewHelper：

// 鼠标移动事件
window.addEventListener('mousemove', (e) => {
  const rect = canvas.getBoundingClientRect();
  const pixelRatio = renderer.getPixelRatio();
  // 转换为Canvas内部的设备像素坐标
  const x = (e.clientX - rect.left) * pixelRatio;
  const y = (e.clientY - rect.top) * pixelRatio;
  helper.handleMouseMove(x, y);
});

// 鼠标按下事件
window.addEventListener('mousedown', (e) => {
  const rect = canvas.getBoundingClientRect();
  const pixelRatio = renderer.getPixelRatio();
  const x = (e.clientX - rect.left) * pixelRatio;
  const y = (e.clientY - rect.top) * pixelRatio;
  helper.handleMouseDown(x, y);
});

// 鼠标抬起事件
window.addEventListener('mouseup', () => {
  helper.handleMouseUp();
});

3. 修正渲染时的Viewport设置

在渲染循环中，手动计算ViewHelper的正确视口位置，避免被布局偏移影响：

function render() {
  requestAnimationFrame(render);

  // 渲染主场景
  renderer.render(scene, camera);

  // 计算ViewHelper视口参数
  const rect = canvas.getBoundingClientRect();
  const pixelRatio = renderer.getPixelRatio();
  const helperSize = 128; // ViewHelper默认尺寸，可按需调整

  // 定位到Canvas右下角（设备像素坐标系）
  const viewportX = (rect.width - helperSize) * pixelRatio;
  const viewportY = (rect.height - helperSize) * pixelRatio;
  const viewportSize = helperSize * pixelRatio;

  // 保存当前渲染状态，避免污染主场景
  renderer.saveState();

  // 设置正确的视口和裁剪区域
  renderer.setViewport(viewportX, viewportY, viewportSize, viewportSize);
  renderer.setScissor(viewportX, viewportY, viewportSize, viewportSize);
  renderer.setScissorTest(true);

  // 渲染ViewHelper
  helper.render(renderer);

  // 恢复渲染状态
  renderer.restoreState();
}

render();

关键逻辑说明 #

• getBoundingClientRect()：获取Canvas在页面中的实际位置和CSS尺寸，确保坐标计算的准确性。
• 设备像素比：转换CSS像素与Canvas实际像素的对应关系，避免高分屏上的位置偏移。
• saveState()/restoreState()：隔离ViewHelper的视口设置，防止影响主场景渲染。
• 裁剪测试：限制ViewHelper的渲染范围，避免溢出到布局的其他区域。

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