没有缩放的Three.js纹理映射

Question

我将尺寸为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 );

Answer 1

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

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