Текстура ThreeJS соответствует UV-карте

Пытаюсь разработать конфигуратор. Речь идет о чашках. Они должны отображаться в 3D. Необходимо загрузить дизайн. Это работает путем загрузки текстуры, подобной этой.

В противном случае конструкция не подойдет. Есть ли способ загрузить полноразмерное прямоугольное изображение в качестве текстуры? Текстура может быть растянута. Текстура не должна быть сделана кубической пользователем, а может быть автоматически в фоновом режиме. Надеюсь, вы меня понимаете. Это OBJ-файл

введите здесь описание изображения


person Lukas Müller    schedule 21.03.2019    source источник


Ответы (1)


Ваше UV-сопоставление выглядит сложным для применения текстуры. Особенно из-за того, что в нем так много пустого пространства, и он изогнут по дуге, поэтому вам нужно будет деформировать все ваши текстуры, чтобы они хорошо подходили.

Вы должны заставить UV-карту работать на вас. Почему бы вам не использовать встроенный класс CylinderBufferGeometry для применения текстура поверх геометрии чашки? Вы можете использовать его атрибуты, чтобы соответствовать стороне формы вашей чашки:

CylinderBufferGeometry(
    radiusTop, 
    radiusBottom,
    height,
    radialSegments,
    heightSegments,
    openEnded,
    thetaStart,
    thetaLength
);

введите здесь описание изображения

При таком подходе вы можете оставить геометрию чашки нетронутой, а затем применить поверх нее текстуру «наклейки». Он может полностью обернуться вокруг чашки, если вы хотите, или он может быть ограничен только передней частью. Вы можете масштабировать его, вращать, и он не будет зависеть от встроенного UV-мэппинга, сделанного в Blender. Еще одним преимуществом является то, что этот подход занимает весь диапазон [0, 1] UV, поэтому вы можете просто использовать квадратные текстуры, и вы не будете тратить данные на пустое пространство.

Посмотрите на эту демонстрацию, чтобы узнать, как можно поиграть с конфигурацией геометрии.

person Marquizzo    schedule 22.03.2019
comment
Спасибо! Работает идеально для меня. - person Lukas Müller; 22.03.2019
comment
@LukasMüller Рад, что это сработало! Не забудьте одобрить ответ, чтобы он помог другим посетителям, столкнувшимся с той же проблемой в будущем. - person Marquizzo; 22.03.2019