3D Сайт на Three.JS: Интерактивное Портфолио

Этот урок описывает создание интерактивного 3D веб-сайта, подобного онлайн-портфолио, с использованием Three.JS. Сайт будет содержать 3D-модель, управляемую пользователем с помощью стрелок на клавиатуре. При приближении к определенным точкам на траектории движения модели будет отображаться информация о проектах, контактах и других данных.

Подготовка проекта

Проект очищен от лишних компонентов. Удалена анимация GSAP. Создан блок infoblok для отображения информации со следующими стилями в style.css:

• display: none; — блок изначально скрыт.
• position: absolute; — абсолютное позиционирование.
• top: 10px; left: 10px; — смещение на 10 пикселей от левого верхнего угла.
• background: white; — белый фон.
• padding: 10px; — отступы.
• border-radius: 5px; — скругленные углы.

В основном JS-файле удалены неиспользуемые элементы: пост-обработка, управление камерой. Осталось подключение Three.JS и загрузчика GLTFLoader для 3D-модели.

Настройка сцены и камеры

Создана сцена. Положение камеры изменено: координаты X сохранены, Y немного увеличена, Z установлена на 10 единиц. OrbitControls удалены. Освещение без изменений. Удалена пост-обработка. Из фигур осталась только загружаемая 3D-модель. Функция render отрисовывает сцену с использованием созданной камеры.

Траектория движения и добавление модели

Создана плоскость для движения модели:

const road = new THREE.Mesh(
    new THREE.PlaneGeometry(30, 20),
    new THREE.MeshStandardMaterial({ color: 'black' })
);
road.rotation.x = -Math.PI / 2;
road.receiveShadow = true;

Цвет дороги изменен, модель уменьшена и размещена в нулевой позиции.

Автоматическое движение модели

Функция moveCar обеспечивает круговое движение модели:

function moveCar() {
    if (!car) return;
    angle += 0.01;
    car.position.x = 5 * Math.cos(angle);
    car.position.z = 5 * Math.sin(angle);
    car.rotation.y = -angle;
}

Функция вызывается в animate. Переменная car хранит объект модели после загрузки.

Контрольные точки и информация

Массив infoPoints содержит объекты с координатами (position) и текстом сообщения (message). Пример:

{ position: new THREE.Vector3(5, 0, 0), message: 'Обо мне: Я веб-разработчик' }

Функция checkInfoPoints проверяет расстояние между позицией модели и точками в infoPoints. Если расстояние меньше 0.5, вызывается showInfo для отображения сообщения в infoblok.

Отображение информации

Функция showInfo отображает сообщение в infoblok:

function showInfo(message) {
    const infoblok = document.getElementById('infoblok');
    infoblok.innerText = message;
    infoblok.style.display = 'block';
}

Управление моделью пользователем

Обработчики событий keydown и keyup управляют движением модели стрелками. Переменная isMoving контролирует движение.

Создан интерактивный 3D веб-сайт с управлением 3D-моделью и отображением информации в зависимости от её позиции. Проект может быть расширен добавлением объектов, эффектов и функционала.