Three.js纹理映射无缩放解决方案

Three.js纹理映射无缩放解决方案

引用

CSDN

1.

https://m.blog.csdn.net/suiusoar/article/details/145291444

在Three.js开发中，如何实现纹理映射时不进行缩放？本文将通过一个具体案例，详细讲解如何解决纹理映射时的缩放问题。

问题背景

在使用Three.js进行开发时，我遇到了一个纹理映射的问题。具体来说，我需要将一个尺寸为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);

解决方案

关键在于根据网格的大小设置纹理的repeat属性。具体来说，需要将repeat属性设置为网格宽度与纹理宽度之比和网格高度与纹理高度之比：

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

通过这种方式，可以确保纹理在映射过程中不会被缩放，从而避免图像变形的问题。