threeJS
  • Введение
  • Инициализация сцены
  • Сетка Оси Камера
  • 3D объекты
  • Источники света
  • Плоские фигуры
  • Щелчок по 3D объекту
  • Вставка изображений
  • Точки и грани
Powered by GitBook
On this page

Was this helpful?

Вставка изображений

Создадим плоскость, на которой будет находиться картинка

    // адрес картинки
    let imgSRC = "mypic.jpg";
    // объект для загрузки изображения
    let loader = new THREE.TextureLoader();

    // загружаем картинку
    loader.load(imgSRC, function(image){
        // описываем размер плоскости
        let planeGeometry = new THREE.PlaneGeometry(50, 50, 1, 1);
        // говорим, что на плоскости картинка
        let planeMaterial = new THREE.MeshLambertMaterial({map: image});
        // создаём плоскость
        let plane = new THREE.Mesh(planeGeometry, planeMaterial);
        // поворачиваем плоскость на 90 градусов
        plane.rotation.x = (-0.5) * Math.PI;
        // задаём координаты плоскости
        plane.position.x = 0;
        plane.position.y = 0;
        plane.position.z = 0;
        // добавляем плоскость на сцену
        scene.add(plane);
        // выводим на экран то, что видит камера
        renderer.render(scene, camera);
    });

Задать количество повторов текстуры

        const repeatValue = 5;
        image.wrapS = THREE.RepeatWrapping;
        image.wrapT = THREE.RepeatWrapping;
        image.repeat.set(repeatValue, repeatValue);
PreviousЩелчок по 3D объектуNextТочки и грани

Last updated 5 years ago

Was this helpful?