Как работать с Three.js для создания 3D-графики

Three.js — это популярная JavaScript-библиотека, которая упрощает работу с WebGL для создания 3D-графики в веб-браузере. В этой статье мы рассмотрим основы работы с Three.js, чтобы помочь вам начать создавать собственные 3D-сцены.

Необходимые инструменты

Прежде всего, для работы с Three.js вам понадобится текстовый редактор и современный веб-браузер с поддержкой WebGL. Также рекомендуется использовать локальный веб-сервер для разработки.

Основы работы с Three.js

Создание 3D-сцены в Three.js состоит из нескольких основных шагов:

1. Создание сцены
2. Создание камеры
3. Создание объектов
4. Добавление освещения
5. Рендеринг сцены

Давайте рассмотрим каждый из этих шагов подробнее.

1. Создание сцены

Сцена — это контейнер для всех объектов, которые вы хотите отобразить. Создание сцены выполняется с помощью следующего кода:

const scene = new THREE.Scene();

2. Создание камеры

Камера определяет, как пользователь будет видеть сцену. В Three.js есть несколько типов камер, но наиболее распространенными являются перспективная и ортографическая камеры.

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

3. Создание объектов

Объекты в Three.js создаются из геометрии и материалов. Геометрия определяет форму объекта, а материалы определяют, как объект будет выглядеть (цвет, текстуры и т. д.).

const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({color: 0x00ff00});
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

4. Добавление освещения

Освещение важно для создания реалистичной сцены. В Three.js есть несколько типов источников света, таких как направленный, точечный и окружающий свет.

const light = new THREE.PointLight(0xffffff, 1, 100);
light.position.set(0, 0, 10);
scene.add(light);

5. Рендеринг сцены

Для отображения сцены на экране необходимо создать WebGLRenderer и добавить его в DOM.

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

Затем нужно создать функцию анимации, которая обновляет сцену и вызывает рендеринг.

function animate() {
  requestAnimationFrame(animate);
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  renderer.render(scene, camera);
}
animate();

Теперь вы знаете основы работы с Three.js для создания 3D-графики! Не стесняйтесь экспериментировать с различными типами геометрии, материалов и освещения, чтобы создать уникальные сцены. Удачи вам в изучении веб-разработки! 👍