Three.js Canvas图片渲染：object-fit:cover比例保持及居中问题排查

我正在开发一个图片扭曲滑块，结构是图片作为背景层，链接作为前景层——鼠标hover每个链接时，背景图片会通过扭曲过渡切换到对应下一张图。

一开始遇到的问题是：不同屏幕尺寸加载页面时，Canvas渲染的图片会拉伸/变形。调整后（2024年3月11日更新），图片比例已经能保持类似object-fit:cover的效果，但图片无法居中于Canvas。尝试修改顶点着色器、ShaderMaterial都没解决，现在需要排查原因并找到解决方案。

初始化时的Canvas与渲染尺寸计算代码 #

let canvasWidth = images[0].clientWidth;
let canvasHeight = images[0].clientHeight;

let renderWidth = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
let renderHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);

let renderW, renderH;

if( renderWidth > canvasWidth ) {
    renderW = renderWidth;
} else {
    renderW = canvasWidth;
}

renderH = canvasHeight;

renderer.setSize( renderW, renderH );

let aspectRatioCanvas = renderWidth / renderHeight;
let aspectRatio = images[0].clientWidth / images[0].clientHeight;

let scaleWidth = 1;
let scaleHeight = 1;

if (aspectRatio > aspectRatioCanvas) {
    scaleWidth = aspectRatio / aspectRatioCanvas;
} else {
    scaleHeight = aspectRatioCanvas / aspectRatio;
}

let geometry = new THREE.PlaneBufferGeometry(
    renderWidth * scaleWidth,
    renderHeight * scaleHeight,
    1
);

窗口resize事件处理代码 #

window.addEventListener( 'resize' , function(e) {
    renderWidth = parent.offsetWidth;
    renderHeight = parent.offsetHeight;
    renderer.setSize(renderWidth, renderHeight);

    let newAspectRatioCanvas = renderWidth / renderHeight;
    let newScaleWidth = 1;
    let newScaleHeight = 1;

    if (aspectRatio > newAspectRatioCanvas) {
        newScaleWidth = aspectRatio / newAspectRatioCanvas;
    } else {
        newScaleHeight = newAspectRatioCanvas / aspectRatio;
    }

    object.scale.set(newScaleWidth, newScaleHeight, 1);
});

需求明确 #

要让Canvas渲染的图片完全模拟CSS的object-fit:cover或background-size:cover行为：

• 始终保持图片原始比例，无拉伸变形
• 图片完整覆盖Canvas区域，超出部分裁剪
• 图片在Canvas中居中显示

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