3D модели в Three.js: загрузка и работа с GLTF

Подготовка к работе: скачивание 3D модели

Для начала необходимо скачать 3D модель. Многие ресурсы предоставляют бесплатные и платные модели. Примеры: Sketchfab.com (широкий выбор, используйте фильтр «downloadable» для бесплатных моделей) и Free3D.com (большое количество простых бесплатных объектов). Скачайте модель в формате GLTF (GL Transmission Format), распакуйте архив и поместите файлы в папку проекта (например, Models или 3D objects).

Импорт и загрузка модели

Импортируйте GLTFLoader:

import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';

(Путь может отличаться в зависимости от структуры проекта.)

Создайте загрузчик и настройте параметры:

const loader = new GLTFLoader();

loader.load(
    'Models/PoliCar/scene.gltf', // Путь к файлу модели
    (gltf) => { // onload
        const model = gltf.scene;
        model.scale.set(1, 1, 1); // Масштаб
        model.position.set(1, 1, 1); // Позиция
        scene.add(model); // Добавление на сцену
    },
    (xhr) => { // onProgress
        console.log((xhr.loaded / xhr.total * 100) + '% загружено');
    },
    (error) => { // onError
        console.error('Error:', error);
    }
);

‘Models/PoliCar/scene.gltf’ — путь к файлу (измените при необходимости).
model.scale.set(1, 1, 1) — устанавливает масштаб.
model.position.set(1, 1, 1) — устанавливает начальную позицию.
scene.add(model) — добавляет модель на сцену.

Настройка отображения

После загрузки может потребоваться настроить позицию камеры. Измените её для оптимального обзора. Для улучшения визуального восприятия добавьте фон:

function animate() {
    // ... ваш код ...
    renderer.setClearColor(0xADD8E6); // Светло-голубой фон
    // ... ваш код ...
}

Статья описывает загрузку и работу с внешними 3D моделями в Three.js. GLTFLoader позволяет импортировать модели и создавать сложные сцены. Настройте масштаб, позицию модели и камеры для оптимального отображения.