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

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

我正试图在一个3JS材质上放置一个图像。我可以更新贴图，但纹理模糊。我是3JS新手，所以我没有清晰的概念。我不明白长宽比是问题还是别的什么

这是我加载纹理的方式：

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,
    });
});

这就是我得到的

但预期的行为应该是

如果有人能帮忙，那就太好了。谢谢

---

这是代码的链接。问题是你的UV在纹理坐标中占据了一个很小的区域。现在，看起来您的UV占用了这么多空间（请参见红色区域）：

这就是为什么它给人的感觉是你的纹理模糊。您需要做的是让UV占据更多空间，如下所示：

有两种方法可以实现这一点

放大UV：将模型导入Blender，并更改网格的UV贴图以占据更多的

[0，1]

范围

缩小纹理比例：您可以利用该属性获得创意，并使用它缩小纹理比例，以匹配现有UV。然后你需要调整它，使它正确居中。比如：

---

修复此问题通常需要在建模包中修复鞋模型的纹理坐标，如。纹理应用于几何体的方式通常由其纹理坐标（通常称为UV）定义。这通常不是你在代码中修复的东西，你在代码中修复，我可以用repeat完美地放置其他纹理。仅当“在x和y上重复”为1时，它会变得模糊。我想UV已经为这个模型定义好了。谢谢你的回答。有没有数学公式来计算重复的x和y？因为我无法找到x和y的完美值。公式取决于UV贴图的完成方式以及您希望图像的外观。这完全取决于你去做一个视觉评估，看看什么看起来对你来说是正确的。只是重复一下，任何专业的3D公司都会通过在建模包中修复模型的UV来解决这个问题。如果目标是能够在那里放置任何纹理，那么您需要在脑海中使用UV设计模型。类似地，如果您希望对鞋的该部分单独设置纹理，则建模者通常会将鞋的该部分构建为一个单独的模型，以便于调整其纹理和材质，使其与模型的其余部分分离。以任何其他方式做这件事，你都在问如何做错事。每个模型都需要手工计算。修正模型，而不是缩小纹理，现在可以了。谢谢你帮我。但我会把我的模型修好@gman。谢谢大家

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