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

Question

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

我正在尝试将图像放在 Threejs material 上。我可以更新地图，但纹理模糊。我是 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,
    });
});

这就是我得到的

但预期的行为应该是

如果有人能提供帮助，那就太好了。谢谢

这是 link 到 Codepen 代码

Answer 1

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

这就是为什么它给人的印象是你的纹理很模糊。你需要做的是让你的 UV 占用更多 space，像这样：

有两种方法可以实现。

放大 UV：将模型导入 Blender，并更改网格的 UV 贴图以占据更多 [0, 1] 范围。
缩小纹理：您可以通过 texture.repeat property and use it to scale down your texture to match your existing UVs. Then you'd need to offset 发挥创意，使其正确居中。类似于：

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

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

Threejs - Maintain aspect ratio while adding texture map to threejs object

javascript

three.js

3d-model