Частично растянутая текстура Three.js

Я использую загрузчик Collada для загрузки своего 3D-объекта в Three.js r65. И при обратном вызове загрузки я сразу применяю текстуру ко всем частям модели с помощью следующего кода.

var loader = new THREE.ColladaLoader();

loader.options.convertUpAxis = true;
loader.load('obj/cdg/Grenada-test1.dae', function(collada) {

    var texture = new THREE.ImageUtils.loadTexture("../models/textures/Gr1 08869 Bready Grey.jpg");


    var material = new THREE.MeshPhongMaterial({map: texture, tranparent: true});
    for (var i = 0; i < collada.scene.children.length; i++) {
        collada.scene.children[i].material = material;
    }

});

В Three.js это выглядит так (текстура растягивается в определенных местах).

Диван в Three.js

Объект отлично отображается в Unity 3D с примененной текстурой, см. следующее изображение.

Диван в единстве

Что я пробовал:

  • Обновление отображения UV в Three.js и в Blender
  • Загрузите модель в другую программу (Unity 3D), чтобы увидеть, возникает ли проблема там.
  • Искал многочисленные вопросы SO, но безрезультатно

Кто-нибудь знает, что здесь происходит и как я могу решить эту странную проблему с текстурой?

Заранее спасибо!

Изменить:

Вот как это выглядит с texture.repeat.set( 2, 2 ) Модель Three.js с повторением текстуры 2

Вот как это выглядит с texture.repeat.set( 10, 10 ) Модель Three.js с повторением текстуры 10

Повторение текстуры приводит к тому, что текстура исчезает, а сплошной цвет заменяет текстуру...


javascript three.js webgl textures collada
person Mandy Schoep    schedule 11.03.2014    source источник
comment
Ищите различные режимы зажима в Three.js.   -  person Abstract Algorithm    schedule 11.03.2014

Ответы (3)


arrow_upward
5
arrow_downward

Установите для свойств wrapS и wrapT значение THREE.RepeatWrapping:

texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;

И убедитесь, что ваши текстуры имеют степень двойки. Это 16х16, 32х32, 64х64, 128х64 и т.д.

person mrdoob    schedule 11.03.2014
comment
Правило мощности 2 для текстур помогло, спасибо, что указали мне правильное направление! - person Mandy Schoep; 12.03.2014
comment
хорошо .. но как я могу применить несколько текстур к одному объекту? любое решение? - person shashi2459; 09.10.2014

arrow_upward
1
arrow_downward

Вы пробовали включить повтор текстуры? Что-то вроде этого:

texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
texture.repeat.set( 2, 2 );
person jokedst    schedule 11.03.2014
comment
Я обновил свой вопрос результатами повторения текстуры. К сожалению, это не работает, как ожидалось... - person Mandy Schoep; 11.03.2014

arrow_upward
0
arrow_downward

хорошо .. но как я могу применить несколько текстур к одному объекту? любое решение?

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

person Endorox    schedule 03.09.2015