无缩放的 Three.js 纹理映射答案

【问题标题】：Three.js Texture Mapping with No Scaling无缩放的 Three.js 纹理映射
【发布时间】：2015-12-23 09:21:16
【问题描述】：

我正在将尺寸为 300 x 250 的纹理映射到 600 x 20 的网格。纹理正在按比例缩小，从而扭曲了图像。无论如何要防止这种情况？理想情况下，我想在 300 X 20 处映射纹理，在 20 及以上时“切割”掉

我的代码如下。

var floorTx = THREE.ImageUtils.loadTexture( './walltile/floorTx.jpg' );
floorTx.wrapS = floorTx.wrapT = THREE.RepeatWrapping;
floorTx.repeat.set(2, 2);
var floorMat = new THREE.MeshPhongMaterial( { map: floorTx, specular: 0x050505, shininess: 100});
var floor = new THREE.Mesh(cube, floorMat );
floor.castShadow = true;
floor.receiveShadow = true;
floor.name = "floor";
floor.dynamic = true;
scene.add( floor );

【问题讨论】：

标签： three.js texture-mapping

【解决方案1】：

关键是根据网格的大小设置纹理的repeat属性。

floorTx.repeat.set(meshWidth / textureWidth, meshHeight / textureHeight);

【讨论】：

哇哦。谢谢！那成功了。但为什么呢？我查看了文档，我认为 arg1 是纹理沿 x 轴重复的次数，而 arg2 是纹理沿 y 轴重复的次数。
是的，你是对的。这只是它的数学。如果您有一个 600 单位宽的网格和一个 300 单位宽的纹理，您希望它重复两次以保持其比例，即 meshWidth / textureWidth = 600 / 300 = 2 :)