Как загрузить несколько текстур в разные координаты на один объект в three.js?

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

// Создаем загрузчик текстур
const textureLoader = new THREE.TextureLoader();

// Загружаем первую текстуру
const texture1 = textureLoader.load('path/to/texture1.jpg');
// Устанавливаем координаты текстуры
texture1.wrapS = THREE.RepeatWrapping;
texture1.wrapT = THREE.RepeatWrapping;
texture1.repeat.set( 2, 2 );

// Загружаем вторую текстуру
const texture2 = textureLoader.load('path/to/texture2.jpg');
// Устанавливаем координаты текстуры
texture2.wrapS = THREE.RepeatWrapping;
texture2.wrapT = THREE.RepeatWrapping;
texture2.repeat.set( 2, 2 );

// Создаем материал, используя две текстуры
const material = new THREE.MeshPhongMaterial({
    map: texture1,  // первая текстура
    specularMap: texture2  // вторая текстура
});

// Создаем геометрию объекта
const geometry = new THREE.BoxGeometry(1, 1, 1);

// Создаем объект с материалом и геометрией
const object = new THREE.Mesh(geometry, material);

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

// Создание загрузчика текстур
const textureLoader = new THREE.TextureLoader();

// Загрузка первой текстуры
textureLoader.load('путь_к_текстуре_1.jpg', function(texture1) {
  // Установка координат повторения для первой текстуры
  texture1.wrapS = THREE.RepeatWrapping;
  texture1.wrapT = THREE.RepeatWrapping;
  texture1.repeat.set(2, 2);

  // Загрузка второй текстуры
  textureLoader.load('путь_к_текстуре_2.jpg', function(texture2) {
    // Установка координат повторения для второй текстуры
    texture2.wrapS = THREE.RepeatWrapping;
    texture2.wrapT = THREE.RepeatWrapping;
    texture2.repeat.set(2, 2);

    // Создание материала, используя обе текстуры
    const material = new THREE.MeshPhongMaterial({
      map: texture1, // первая текстура
      specularMap: texture2 // вторая текстура
    });

    // Создание геометрии объекта
    const geometry = new THREE.BoxGeometry(1, 1, 1);

    // Создание объекта с материалом и геометрией
    const object = new THREE.Mesh(geometry, material);

    // Добавление объекта на сцену
    scene.add(object);
  });
});