Three.js 无缩放的纹理贴图

Question

我正在将尺寸为 300 x 250 的纹理映射到 600 x 20 的网格。纹理正在按比例缩小，从而扭曲图像。无论如何要防止这种情况？理想情况下，我想将纹理映射到 300 X 20，"cutting" 远离 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);

Three.js 无缩放的纹理贴图

Three.js Texture Mapping with No Scaling

texture-mapping

three.js