Question

实质上，我想复制CSS background-size: cover的工作方式。

在这里你可以看到图像正在缩放以保持其纵横比，但它并没有真正正常工作，因为图像没有填充平面，留下边缘 - https://next.plnkr.co/edit/8650f9Ji6qWffTqE?preview

代码段（第170-175行） -

var geometryAspectRatio = 5/3;
var imageAspectRatio = 3264/2448;
textTile.wrapT = THREE.RepeatWrapping;
textTile.repeat.x = geometryAspectRatio / imageAspectRatio; 
textTile.offset.x = 0.5 * ( 1 - textTile.repeat.x );

我想要发生的是它如此扩大规模，然后将其自我重新定位在中心（与cover的工作方式非常相似）。

Answer 1

    var repeatX, repeatY;
repeatX = w * this.textureHeight / (h * this.textureWidth);
if (repeatX > 1) {
  //fill the width and adjust the height accordingly
  repeatX = 1;
  repeatY = h * this.textureWidth / (w * this.textureHeight);
  mat.map.repeat.set(repeatX, repeatY);
  mat.map.offset.y = (repeatY - 1) / 2 * -1;
} else {
  //fill the height and adjust the width accordingly
  repeatX = w * this.textureHeight / (h * this.textureWidth);
  repeatY = 1;
  mat.map.repeat.set(repeatX, repeatY);
  mat.map.offset.x = (repeatX - 1) / 2 * -1;
}

更新了https://next.plnkr.co/edit/LUk37xLG2yvv6hgg?preview

Answer 2

对于像我一样对此感到困惑的人来说，我缺少的部分是任何纹理的 .repeat.x 和 .repeat.y 属性的值都可以小于 1，并且在小于 1 时放大图像作为规模的倒数。想想看，当它的比例为 2 时，它会以某种方式重复 0.5 次，因为您只能看到图像的一半。

所以... THREE.js 中的纹理不支持并且在某些库中很常见的东西是

.scaleX = 2;（从 v1.30.1 开始，THREE.js 纹理不支持）

和 THREE.js 纹理等效将是

texture.repeat.x = .5;

要将比例转换为“重复”，只需执行与比例相反的操作

var desiredScaleX = 3;
var desiredRepeatX = 1 / desiredScaleX;

比例 3 的重复结果为 (1/3) = .3333；换句话说，3x 图像将被裁剪，只显示图像的 1/3，因此它重复 0.3333 次。

至于缩放以适应覆盖，通常选择两者中较大的比例即可，例如：

var fitScaleX = targetWidth / actualWidth;
var fitScaleY = targetHeight / actualHeight;
var fitCoverScale = Math.max(fitScaleX,fitScaleY);
var repeatX = 1 / fitCoverScale;
var repeatY = 1 / fitCoverScale;

三个JS - 缩放纹理以完全适合（任何大小）平面

2 个答案: