Threejs-在将纹理贴图添加到Threejs对象时保持纵横比

Question

我们要创建3D鞋子设计工具，您可以在其中设计图案并将其上传到鞋子。

我正在尝试将图像放置在Threejs材料上。我可以更新地图，但是纹理模糊。我是Threejs的新手，所以我的概念不清楚。我不知道长宽比是问题还是其他原因。

这是我如何加载纹理：

var texture_loader = new THREE.TextureLoader();

var texture = texture_loader.load( 'https://ik.imagekit.io/toesmith/pexels-photo-414612_D4wydSedY.jpg', function ( texture ) {

    texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
    texture.offset.set( 0, 0 );
    texture.repeat.set( 1, 1 );
    vamp.material = new THREE.MeshPhongMaterial({
      map: texture,
      color: new THREE.Color('#f2f2f2'),
      shininess: 20,
    });
});

这就是我要得到的

但是预期的行为应该是

如果有人可以帮助，那就太好了。谢谢

这是Codepen代码的链接

Answer 1

问题是您的UV在纹理坐标中占据的面积很小。就像现在一样，您的紫外线似乎占据了这么多空间（请参见红色区域）：

这就是为什么它给人的印象是您的纹理模糊。您需要做的是使UV占用更多空间，例如：

有两种方法可以实现这一目标。

1. 放大UV ：将模型导入Blender，然后更改网格的UV贴图以占据[0, 1]范围的更多部分。
2. 缩小纹理：您可以利用texture.repeat属性来发挥创意，并使用它来缩小纹理以匹配现有的UV。然后，您需要offset，使其正确居中。像这样：

texture.repeat = new THREE.Vector2(10, 10);
texture.offset = new THREE.Vector2(xx, yy);