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

【问题标题】：Threejs - Maintain aspect ratio while adding texture map to threejs objectThreejs - 在将纹理贴图添加到 Threejs 对象时保持纵横比
【发布时间】：2019-10-21 18:35:15
【问题描述】：

我们想要创建一个 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代码的链接

【问题讨论】：

修复此问题通常需要您在 blender 等建模包中修复鞋模型的纹理坐标。纹理如何应用于几何体通常由其纹理坐标（通常称为 UV）定义。这通常不是您在代码中修复的问题，您可以在其中修复 uv editor of some modeling package
我可以完美地重复放置其他纹理。只有在 x 和 y 上重复为 1 时，它才会变得模糊。我认为已经为这个模型定义了 UV。

标签： javascript three.js 3d-model

【解决方案1】：

问题在于您的 UV 在纹理坐标中占据了非常小的区域。就像现在一样，您的 UV 似乎占用了这么多空间（见红色区域）：

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

有两种方法可以实现。

放大 UVs：将模型导入 Blender，并更改网格的 UV 映射以占据更多 [0, 1] 范围。
缩小纹理：您可以使用texture.repeat 属性发挥创意，并使用它来缩小纹理以匹配现有的UV。然后你需要offset 让它正确居中。比如：

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

【讨论】：

感谢您的回答。有没有计算重复x和y的数学公式？因为我找不到 x 和 y 的完美值。
公式取决于 UV 映射的完成方式以及您希望图像的外观。进行视觉评估并查看适合您的完全取决于您。
再次重申，任何专业的 3D 公司都会通过在建模包中修复模型的 UV 来解决此问题。如果目标是能够在那里放置任何纹理，那么您需要考虑到使用 UV 进行建模设计。同样，如果您想单独为鞋子的该部分设置纹理，那么您的建模师通常会将鞋子的该部分构建为单独的模型，以便轻松调整其纹理和材料，使其与模型的其余部分分开。通过以任何其他方式进行操作，您是在问如何做错了。每个模型都需要手动数学。改为修复模型
现在可以缩小纹理。谢谢你的协助。但是会修复我的模型@gman。谢谢大家