Как правильно предзагрузить изображения для использования 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
29
30
31

// Создайте экземпляр загрузчика текстур
var textureLoader = new THREE.TextureLoader();

// Загрузите изображение
textureLoader.load(
  // Путь к изображению
  'path/to/your/image.jpg',
  
  // Функция, вызываемая, когда загрузка завершена
  function (texture) {
    // Создайте объект материала с использованием загруженной текстуры
    var material = new THREE.MeshBasicMaterial({ map: texture });
  
    // Создайте геометрию и меш с использованием материала
    var geometry = new THREE.BoxGeometry(1, 1, 1);
    var mesh = new THREE.Mesh(geometry, material);

    // Добавьте меш на сцену
    scene.add(mesh);
  },
  
  // Функция, вызываемая во время загрузки
  function (xhr) {
    console.log((xhr.loaded / xhr.total * 100) + '% загружено');
  },
  
  // Функция, вызываемая при ошибке загрузки
  function (error) {
    console.log('Ошибка загрузки текстуры', error);
  }
);

1
2
3

var textureLoader = new THREE.TextureLoader();
var texture1 = textureLoader.load('path/to/your/image1.jpg');
var texture2 = textureLoader.load('path/to/your/image2.jpg');

1
2

var material1 = new THREE.MeshBasicMaterial({ map: texture1 });
var material2 = new THREE.MeshBasicMaterial({ map: texture2 });

1
2
3
4
5

var geometry1 = new THREE.BoxGeometry(1, 1, 1);
var mesh1 = new THREE.Mesh(geometry1, material1);

var geometry2 = new THREE.BoxGeometry(1, 1, 1);
var mesh2 = new THREE.Mesh(geometry2, material2);

1
2

scene.add(mesh1);
scene.add(mesh2);