Three.js：使图像纹理适合对象而不扭曲或重复答案

【问题标题】：Three.js: Make image texture fit object without distorting or repeatingThree.js：使图像纹理适合对象而不扭曲或重复
【发布时间】：2022-04-08 15:31:20
【问题描述】：

我正在加载一个 .png 文件并将其显示为矩形表面上的纹理。 .png 的纵横比和表面的纵横比不一样。我需要纹理来适应对象

不重复
不失真，即保持其纵横比
位于中心
纹理的高度应按比例放大或缩小到对象的高度。

（对于那些熟悉 CSS 的人，我正在尝试实现相当于 background-size: auto 100%; background-repeat: no-repeat; background-position: center;。）

目前为止

tex1.wrapS = THREE.ClampToEdgeWrapping
tex1.wrapT = THREE.ClampToEdgeWrapping
repeatX = (clothWidth * textureSetting.h / (clothHeight * textureSetting.w))
repeatY = 1
tex1.repeat.set repeatX, repeatY

clothHeight 和 clothWidth 是对象的尺寸，textureSetting.w 和 textureSetting.h 是纹理的尺寸。

纹理扭曲并向右偏移。

【问题讨论】：

这是您要找的吗？ texture.wrapT = THREE.RepeatWrapping; texture.repeat.x = geometryAspectRatio / imageAspectRatio; texture.offset.x = 0.5 * ( 1 - texture.repeat.x );您的图像纵横比是否保证大于您的几何纵横比？
不，不能保证。不过，还没有测试过其他情况。

标签： three.js

【解决方案1】：

我按照@WestLangley 的建议让它工作了。这是 CoffeeScript 中的解决方案：

tex1.wrapS = THREE.ClampToEdgeWrapping
tex1.wrapT = THREE.RepeatWrapping
repeatX = (clothWidth * textureSetting.h / (clothHeight * textureSetting.w))
repeatY = 1
tex1.repeat.set repeatX, repeatY
tex1.offset.x = (repeatX - 1) / 2 * -1

对于喜欢原生 JavaScript 的人来说，这里是 JS 版本：

var repeatX, repeatY;
tex1.wrapS = THREE.ClampToEdgeWrapping;
tex1.wrapT = THREE.RepeatWrapping;
repeatX = clothWidth * textureSetting.h / (clothHeight * textureSetting.w);
repeatY = 1;
tex1.repeat.set(repeatX, repeatY);
tex1.offset.x = (repeatX - 1) / 2 * -1;

【讨论】：

【解决方案2】：

多年后！我更改了@bootsmaat 的代码

注意图片是横向还是纵向。

const texture = new THREE.TextureLoader().load(images[index].url, texture => {
var repeatX, repeatY;
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
if (texture.source.data.height < texture.source.data.width) {
  repeatX = squareWidth * texture.source.data.height / (squareWidth * texture.source.data.width);
  repeatY = 1;
  texture.repeat.set(repeatX, repeatY);
  texture.offset.x = (repeatX - 1) / 2 * -1;
} else {
  repeatX = 1;
  repeatY = squareWidth * texture.source.data.width / (squareWidth * texture.source.data.height);
  texture.repeat.set(repeatX, repeatY);
  texture.offset.y = (repeatY - 1) / 2 * -1;
}});

【讨论】：