Коли ви вперше занурюєтесь у Three.js, це може здатися ніби ви потрапляєте в абсолютно новий світ — буквально! Three.js — це потужна бібліотека, яка оживляє 3D графіку в інтернеті, але перш ніж створювати інтерактивні 3D сцени та красиві анімації, потрібно освоїти основи. Можна вважати їх будівельними блоками вашого 3D світу. Як тільки ви зрозумієте, як налаштувати основні елементи, ви будете готові зануритись у веселіше.
Давайте розглянемо основні компоненти, які вам знадобляться для початку роботи з Three.js.
Налаштування сцени: Основи Three.js 🖥️
Створення 3D сцени — це не просто розкидання об'єктів у просторі. Потрібно налаштувати три ключові елементи: сцену, камеру та рендерер. Ось як кожен з них працює:
- Сцена — це контейнер, в якому живуть всі об'єкти. Всі 3D об'єкти, освітлення та камери, які ви створюєте, існуватимуть в цьому просторі.
- Камера — як і кінокамера, вона визначає, що саме глядач може побачити в 3D світі. У Three.js найпоширенішим типом камери є PerspectiveCamera, яка імітує те, як ми бачимо світ у реальному житті.
- Рендерер — рендерер бере все з сцени та камери і відображає це на екрані. Це двигун, що стоїть за вашими 3D візуалізаціями.
Фрагмент коду: Налаштування основ
// Налаштування сцени
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);
Якщо ці компоненти налаштовані, ваш 3D світ готовий до роботи!
Додавання об'єктів: Привіт, кубе! 🟦
Тепер, коли сцена налаштована, час додати кілька об'єктів. В Three.js ви можете створювати 3D об'єкти за допомогою геометрії (форми) та матеріалу (зовнішнього вигляду). Я почав з простого куба, бо з ним легко працювати і це цікаво спостерігати!
Фрагмент коду: Додавання куба
// Створення геометрії (куба)
const geometry = new THREE.BoxGeometry();
// Створення матеріалу (кольору)
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
// Об'єднання геометрії та матеріалу для створення куба
const cube = new THREE.Mesh(geometry, material);
// Додавання куба до сцени
scene.add(cube);
Тепер у вас є куб, що сидить у вашій 3D сцені. Але що це за куб, якщо він не рухається, правда? Давайте додамо анімацію!
Анімація сцени: Зробимо об'єкти рухомими ⏱️
Наступний крок — анімація. Адже 3D графіка не буде цікавою, якщо все статичне. Цикл анімації в Three.js дозволяє робити об'єкти рухомими. У моєму випадку я вирішив, що куб буде обертатися. За кілька рядків коду я зміг обертати його по всіх трьох осях (X, Y та Z).
Фрагмент коду: Анімація куба
// Цикл анімації
function animate() {
requestAnimationFrame(animate);
// Обертання куба
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
// Відображення сцени з перспективи камери
renderer.render(scene, camera);
}
// Запуск анімації
animate();
Тепер мій куб не просто сидів там — він обертався в 3D просторі, і сцена ожила!
Освітлення: Освітимо сцену 💡
3D об'єкти можуть виглядати плоско і нудно без освітлення. Освітлення дає глибину, тіні та життя вашій сцені. В Three.js можна додавати різні типи світла.
Для цієї базової налаштування я додав навколишнє освітлення (ambient light), щоб усе було видно, та направлене освітлення (directional light), щоб симулювати сонячне світло.
Фрагмент коду: Додавання освітлення
// Навколишнє освітлення для освітлення сцени
const ambientLight = new THREE.AmbientLight(0x404040); // М'яке біле світло
scene.add(ambientLight);
// Направлене освітлення для симуляції сонячного світла
const directionalLight = new THREE.DirectionalLight(0xffffff, 1); // Біле світло
scene.add(directionalLight);
З освітленням куб став виглядати набагато динамічніше. Тіні та світлі ділянки підкреслили його форму, і вся сцена виглядала набагато реалістичніше.
Чому ці основи важливі 🛠️
Перед тим як зануритись у складніші можливості Three.js, важливо освоїти базові основи. Налаштування сцени, додавання об'єктів, їх анімація та правильне освітлення — це та міцна основа, на якій можна будувати все решта.
Ці базові концепції — це те, на чому все інше будується. Без них додавати інтерактивність, складні анімації або будь-які візуальні ефекти було б, як намагатись побудувати будинок без фундаменту. Як тільки ви освоїте ці будівельні блоки, у вас буде достатньо навичок для того, щоб братися за більш складні проекти і створювати справді динамічні та захоплюючі 3D досвіди.
Що далі? 🚀
Тепер, коли основи налаштовано, час перейти до більш захоплюючих речей! У наступних кроках я розгляну, як зробити ваші 3D сцени інтерактивними — подумайте про клікабельні об'єкти, анімації, що залежатимуть від користувача, та багато іншого. Можливості безмежні, і я радий продовжити цю подорож з Three.js, розширюючи межі того, що ми можемо створити!
Перекладено з: The Building Blocks of Three.js — Scene, Camera, Cube, and More!