Threejs - Сохранение пропорций при добавлении карты текстуры в объект Threejs. - PullRequest
Новая
       20

Threejs - Сохранение пропорций при добавлении карты текстуры в объект Threejs.

0 голосов
/ 06 июня 2019

Мы хотим создать инструмент для трехмерного проектирования обуви, где вы можете создавать шаблоны и загружать их в обувь.

Я пытаюсь разместить изображение на материале 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,
    });
});

Это то, что я получаю

enter image description here

Но ожидаемое поведение должно быть

enter image description here

Если бы кто-нибудь мог помочь, это было бы здорово. Спасибо

Вот ссылка на Codepen код

1 Ответ

0 голосов
/ 06 июня 2019

Проблема в том, что ваши UV занимают очень маленькую область в текстурных координатах. Сейчас они выглядят так, будто ваши ультрафиолеты занимают столько места (см. Красную область):

enter image description here

И именно поэтому создается впечатление, что ваша текстура размыта. То, что вам нужно сделать, это заставить ваши UVs занимать больше места, как это:

enter image description here

Есть 2 способа добиться этого.

  1. Увеличение масштаба UV : импортируйте вашу модель в Blender и измените UV-отображение сетки, чтобы занять большую часть диапазона [0, 1].
  2. Уменьшить текстуру : Вы можете проявить креативность с помощью свойства texture.repeat и использовать его для уменьшения текстуры в соответствии с существующими UV. Тогда вам нужно сместить , чтобы оно было правильно отцентрировано. Что-то вроде: 
texture.repeat = new THREE.Vector2(10, 10);
texture.offset = new THREE.Vector2(xx, yy);
...