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在纹理坐标中占据很小的区域。 就像现在一样，看起来你的紫外线占用了这么大的空间（见红色区域）：

这就是为什么它给人的印象是你的纹理模糊。 你需要做的是让你的紫外线占用更多空间，如下所示：

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

1. 向上扩展UV ：将模型导入Blender，并更改网格的UV贴图以占据[0, 1]范围的更多区域。
2. 向下缩放纹理 ：您可以使用texture.repeat属性获得创意，并使用它来缩小纹理以匹配现有的UV。 然后你需要抵消它，使它正确居中。 就像是：

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