Three.js — это мощная JavaScript-библиотека, которая позволяет создавать впечатляющие 3D-графики и анимации прямо в веб-браузере. Она открывает новые горизонты для веб-разработчиков, давая возможность создавать интерактивные 3D-сцены без необходимости изучения сложных графических API. В этой статье мы рассмотрим основы работы с Three.js и научимся создавать простые, но эффектные 3D-анимации.
Что такое Three.js?
Three.js — это открытая JavaScript-библиотека, которая упрощает создание и отображение анимированной 3D-компьютерной графики в веб-браузере. Она использует WebGL для рендеринга графики, но абстрагирует сложность этой технологии, предоставляя разработчикам простой и понятный API.
Начало работы с Three.js
Чтобы начать работу с Three.js, вам нужно включить библиотеку в ваш проект. Вы можете сделать это, добавив следующий скрипт в ваш HTML-файл:
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
Создание первой 3D-сцены
Давайте создадим простую 3D-сцену с вращающимся кубом. Вот базовый HTML-файл:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Первая сцена Three.js</title>
<style>
body { margin: 0; }
canvas { display: block; }
</style>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script>
// Здесь будет наш JavaScript код
</script>
</body>
</html>
Теперь добавим JavaScript-код для создания сцены:
// Создаем сцену
const scene = new THREE.Scene();
// Создаем камеру
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;
// Создаем рендерер
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// Создаем куб
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
// Функция анимации
function animate() {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
animate();
Этот код создает простую сцену с зеленым вращающимся кубом. Давайте разберем основные компоненты:
- Сцена (Scene) — контейнер для всех объектов и источников света.
- Камера (Camera) — определяет, что мы видим на экране.
- Рендерер (Renderer) — отрисовывает сцену.
- Геометрия (Geometry) — определяет форму объекта.
- Материал (Material) — определяет внешний вид объекта.
- Меш (Mesh) — комбинация геометрии и материала.
Добавление освещения
Чтобы сделать нашу сцену более реалистичной, добавим освещение. Изменим материал куба и добавим источник света:
// Изменяем материал куба
const material = new THREE.MeshPhongMaterial({ color: 0x00ff00 });
// Добавляем источник света
const light = new THREE.PointLight(0xffffff);
light.position.set(10, 10, 10);
scene.add(light);
Интерактивность с OrbitControls
Three.js предоставляет множество дополнительных инструментов. Один из них — OrbitControls, который позволяет пользователю вращать камеру вокруг сцены с помощью мыши. Добавим его в наш проект:
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/controls/OrbitControls.js"></script>
Теперь добавим контроллер в наш JavaScript-код:
const controls = new THREE.OrbitControls(camera, renderer.domElement);
function animate() {
requestAnimationFrame(animate);
controls.update();
renderer.render(scene, camera);
}
Создание сложных геометрий
Three.js позволяет создавать различные геометрические фигуры. Давайте добавим несколько объектов на нашу сцену:
// Сфера
const sphereGeometry = new THREE.SphereGeometry(0.5, 32, 32);
const sphereMaterial = new THREE.MeshPhongMaterial({ color: 0xff0000 });
const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
sphere.position.x = -1.5;
scene.add(sphere);
// Конус
const coneGeometry = new THREE.ConeGeometry(0.5, 1, 32);
const coneMaterial = new THREE.MeshPhongMaterial({ color: 0x0000ff });
const cone = new THREE.Mesh(coneGeometry, coneMaterial);
cone.position.x = 1.5;
scene.add(cone);
Анимация объектов
Чтобы сделать сцену более динамичной, давайте добавим анимацию для всех объектов:
function animate() {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
sphere.rotation.y += 0.02;
cone.rotation.z += 0.02;
controls.update();
renderer.render(scene, camera);
}
Заключение
Three.js открывает огромные возможности для создания впечатляющих 3D-графиков и анимаций в веб-браузере. В этой статье мы рассмотрели лишь базовые концепции, но даже с их помощью можно создавать интересные 3D-сцены. Продолжайте экспериментировать с различными геометриями, материалами и эффектами, чтобы раскрыть весь потенциал Three.js.
Не забудьте изучить официальную документацию Three.js для более глубокого понимания всех возможностей этой замечательной библиотеки. Создавайте уникальные 3D-визуализации и поднимите интерактивность ваших веб-проектов на новый уровень с помощью Three.js!
