Three.js:使图像纹理适合对象而不扭曲或重复 [英] Three.js: Make image texture fit object without distorting or repeating

问题描述

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

I'm loading a .png file and displaying it as a texture on a rectangular surface. The aspect ratio of the .png and the aspect ratio of the surface are not the same. I need the texture to fit the object

• 不再重复
• 不失真，即保持其纵横比
• 居中
• 纹理的高度应按比例放大或缩小到对象的高度.

(对于那些熟悉 CSS 的人，我试图实现等效于 background-size: auto 100%; background-repeat: no-repeat; background-position: center; .)

(For those familiar to CSS, I'm trying to achieve the equivalent of 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 是纹理的尺寸.

clothHeight and clothWidth are the dimensions of the object, textureSetting.w and textureSetting.h are the dimensions of the texture.

纹理扭曲并向右偏移.

推荐答案

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

I got it to work just as @WestLangley suggested. Here's the solution in 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

对于喜欢 vanilla JavaScript 的人，这里是 JS 版本:

And for anyone who prefers vanilla JavaScript, here is the JS Version:

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;

这篇关于Three.js:使图像纹理适合对象而不扭曲或重复的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！