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

Question

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

我正在尝试将图像放置在 Threejs Material 上。我可以更新 map ，但纹理很模糊。我是 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 似乎占据了这么多空间(参见红色区域):

这就是为什么它给人的印象是你的纹理是模糊的。您需要做的是让 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);