Three.js — это мощная JavaScript библиотека, которая позволяет создавать впечатляющую 3D графику прямо в веб-браузере. В этой статье мы рассмотрим основы работы с Three.js и научимся создавать простые 3D сцены.
Что такое Three.js и почему его стоит использовать?
Three.js — это библиотека, построенная поверх WebGL, которая значительно упрощает процесс создания 3D графики в браузере. Она предоставляет высокоуровневый API, который абстрагирует сложности низкоуровневого WebGL, позволяя разработчикам сосредоточиться на создании 3D контента, а не на технических деталях рендеринга.
Преимущества использования Three.js:
- Простота в освоении и использовании
- Широкие возможности для создания сложных 3D сцен
- Кроссбраузерная совместимость
- Активное сообщество и богатая документация
Настройка рабочего окружения
Для начала работы с Three.js вам понадобится:
- Современный веб-браузер с поддержкой WebGL
- Текстовый редактор или IDE (например, Visual Studio Code)
- Базовые знания HTML, CSS и JavaScript
Чтобы подключить Three.js к вашему проекту, добавьте следующий скрипт в ваш HTML-файл:
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
Создание первой 3D сцены
Давайте создадим простую 3D сцену с кубом. Вот пошаговое руководство:
- Создайте HTML-файл с canvas элементом:
<!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);
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);
camera.position.z = 5;
- Создайте функцию анимации:
function animate() {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
animate();
Теперь у вас должен быть вращающийся зеленый куб на черном фоне!
Добавление освещения и текстур
Чтобы сделать нашу сцену более реалистичной, добавим освещение и текстуру:
- Создайте источник света:
const light = new THREE.PointLight(0xffffff);
light.position.set(10, 10, 10);
scene.add(light);
- Загрузите текстуру и примените ее к кубу:
const textureLoader = new THREE.TextureLoader();
const texture = textureLoader.load('path/to/your/texture.jpg');
const material = new THREE.MeshPhongMaterial({ map: texture });
const cube = new THREE.Mesh(geometry, material);
Взаимодействие с 3D объектами
Three.js позволяет легко добавлять интерактивность к вашим 3D сценам. Вот пример обработки кликов по объекту:
const raycaster = new THREE.Raycaster();
const mouse = new THREE.Vector2();
function onMouseClick(event) {
mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
mouse.y = - (event.clientY / window.innerHeight) * 2 + 1;
raycaster.setFromCamera(mouse, camera);
const intersects = raycaster.intersectObjects(scene.children);
if (intersects.length > 0) {
intersects[0].object.material.color.setHex(Math.random() * 0xffffff);
}
}
window.addEventListener('click', onMouseClick, false);
Оптимизация производительности
При работе с 3D графикой важно следить за производительностью. Вот несколько советов:
- Используйте геометрию с низким количеством полигонов, где это возможно
- Применяйте уровни детализации (LOD) для объектов
- Используйте текстуры с оптимальным разрешением
- Ограничьте количество источников света в сцене
Заключение
Three.js открывает огромные возможности для создания впечатляющей 3D графики в браузере. В этой статье мы рассмотрели основы работы с библиотекой, от создания простой сцены до добавления освещения, текстур и интерактивности.
Продолжайте экспериментировать с Three.js, изучайте документацию и примеры на официальном сайте. С практикой вы сможете создавать сложные 3D визуализации, игры и интерактивные веб-приложения.
Не забывайте оптимизировать ваши 3D сцены для лучшей производительности, особенно на мобильных устройствах. С Three.js вы можете воплотить в жизнь самые смелые идеи 3D графики прямо в браузере!
