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

Что можно сделать с помощью Three.js?

Three.js используется, когда нужно что-то трёхмерное и интерактивное в вебе. Вот примеры:

  • Интерактивные сайты, где 3D-объекты двигаются и реагируют на действия пользователя.
  • Виртуальные выставки и тур по помещению — как прогулка внутри здания, только через браузер.
  • Интернет-магазины, где товар можно крутить и рассматривать со всех сторон.
  • Игры и визуализации, в том числе простые симуляторы.
  • Научные и технические демонстрации, где важно показать форму и движение объектов.

А чего с ним делать нельзя?

Есть и ограничения:

  • Three.js не подходит для сложных игр уровня PlayStation. Это всё-таки браузер, не игровая консоль.
  • Он не заменит полноценные игровые движки вроде Unity или Unreal, особенно если нужен реализм, физика, мультиплеер и т.д.
  • Сложные сцены могут тормозить, особенно на слабых телефонах. Нужно следить за «весом» 3D-моделей и оптимизацией.

Что делает Three.js?

Three.js отвечает за:

  • Создание 3D-объектов: кубы, сферы, модели из других программ.
  • Освещение: солнце, лампы, тени.
  • Камеру: как и откуда пользователь видит сцену.
  • Анимацию: движение объектов, вращение, изменения со временем.
  • Рендеринг — то есть «перевод» всей сцены в картинку, которую видит пользователь.

Где используется на практике?

  • На сайтах крупных брендов, чтобы поразить посетителя визуалами.
  • В архитектуре — показывают, как будет выглядеть дом или интерьер.
  • В искусстве — создают интерактивные инсталляции.
  • В образовании — объясняют сложные вещи с помощью 3D-моделей.

Что нужно, чтобы начать?

Для работы с Three.js нужно разбираться в веб-разработке и особенно в JavaScript — языке, на котором он написан. Без технической подготовки будет трудно. Это не "конструктор сайтов", а инструмент для тех, кто хочет делать что-то технически сложное и визуально необычное.

Итог

Three.js — мощный инструмент для создания 3D-графики в интернете. Он открывает огромные возможности: от визуальных эффектов до интерактивных проектов. Но требует навыков и аккуратного подхода — просто так кубик не запрыгает. Зато, если разобраться, можно делать вещи, которые действительно впечатляют.

Минимум, который нужно понять перед Three.js

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

  • Scene — контейнер, где лежат все объекты.
  • Camera — «глаз» пользователя, который смотрит на сцену.
  • Renderer — отрисовывает сцену в браузере.
  • Mesh — объект из формы (геометрии) и внешнего вида (материала).
  • Light — свет, без которого объекты часто выглядят плоско или чёрно.

Быстрый старт за 15 минут

Для первого шага не нужен сложный пайплайн. Важно увидеть 3D в браузере как можно быстрее.

  1. Создай проект и установи библиотеку: npm install three (или подключи через CDN).
  2. Сделай два файла: index.html и main.js.
  3. Подключи скрипт и запусти локально через простой сервер.
  4. Собери базовую сцену: камера, рендерер, куб, свет.

Первая 3D-сцена с вращающимся кубом

Вот минимальный пример, с которого реально начать. Он покрывает главные элементы 3D-сцены.

import * as THREE from 'three';

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

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

const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(2, 2, 3);
scene.add(light);

camera.position.z = 3;

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

animate();

Обязательные сущности любой 3D-сцены

Когда ты понимаешь эти блоки, Three.js перестаёт быть «магией» и становится нормальным рабочим инструментом.

  • Scene: хранит всё, что нужно показать.
  • PerspectiveCamera: формирует объёмную перспективу.
  • WebGLRenderer: рисует кадр в canvas.
  • Geometry: форма объекта (куб, сфера, плоскость).
  • Material: как выглядит поверхность.
  • Light: освещение для объёмного восприятия.

Частые ошибки новичков в Three.js

  • Чёрный экран из-за того, что камера смотрит не на объект.
  • Объект «пропал», потому что забыли поставить позицию камеры.
  • Нет света, поэтому модель выглядит как чёрный силуэт.
  • Canvas не под размер окна и картинка искажена.
  • Нет цикла requestAnimationFrame, поэтому сцена не обновляется.

Когда Three.js лучше Phaser, а когда нет

Three.js и Phaser решают разные задачи. Если перепутать выбор, можно потратить много времени впустую.

  • Выбирай Three.js, когда нужен 3D-визуал, интерактивные сцены, витрины, демонстрации, Web-опыт с объёмом.
  • Выбирай Phaser, когда делаешь 2D-игру с быстрым геймдев-циклом, сценами и удобной игровой логикой.

FAQ

Нужно ли знать WebGL, чтобы начать Three.js?

Нет. Three.js как раз помогает стартовать без прямой работы с низкоуровневым WebGL.

Нужна ли сильная математика?

Для первого уровня — нет. Базовой геометрии и понимания координат достаточно, чтобы собрать рабочую сцену.

Можно ли начать без TypeScript?

Да. Для старта хватит JavaScript. TypeScript полезен позже, когда проект становится больше.

Сколько времени до первого результата?

Если делать минимальный проект, первый вращающийся 3D-объект можно получить в тот же вечер.

Вывод

Three.js — отличный вход в 3D для веба, если идти от простого к сложному. Не пытайся сразу собрать «игру мечты». Сначала сцена, камера, свет, объект и анимация. Этот маленький фундамент потом экономит десятки часов.

Обложка книги JavaScript с нуля: учимся программировать, создавая игры

Книга по JavaScript для начинающих

«JavaScript с нуля: учимся программировать, создавая игры»

Пошаговый формат с маленькими практическими задачами: от базового синтаксиса до первых игровых механик без перегруза теорией.

Читать книгу на ЛитРес →