Three.js: что это и как собрать первую 3D-сцену в браузере

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

Разберём, что это за библиотека, зачем она нужна и как за один вечер собрать свою первую трёхмерную сцену. Покажем полный рабочий код вращающегося куба, объясним каждую строчку и разберём пять причин, по которым у новичка вместо картинки получается чёрный экран.

Отдельно поговорим про версии. Это не занудство: API Three.js заметно менялся между релизами, и код из старых туториалов на свежей библиотеке просто не запустится. Весь код в статье написан под Three.js r185 (пакет 0.185.1, вышел 1 июля 2026 года) и сверен с официальной документацией проекта.

Если вам ближе трёхмерная графика без программирования, посмотрите обзор браузерного редактора Spline: там 3D собирают мышкой в интерфейсе. А про то, как вообще рождаются трёхмерные объекты, мы писали в материале про 3D-моделирование с нуля. Three.js занимается другим: он показывает готовые модели в браузере и оживляет их кодом.

Статья рассчитана на новичка. Нужен только базовый JavaScript: переменные, функции, объекты. Если и с этим пока туго, начните с разбора, зачем новичку учить JavaScript, а потом возвращайтесь.

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

CheckroiПодборка курсов по JavaScript177 курсов • 30 школСравните цены, школы, программу и найдите выгодные предложения по обучениюСравнить→

Что такое Three.js и что на нём собираютСкопировано

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

Проект появился в 2010 году, его автор Рикардо Кабелло, известный в вебе как mrdoob. За пятнадцать лет Three.js стал фактическим стандартом трёхмерной графики в вебе: на сентябрь 2026 года это примерно 3,5 млн скачиваний в неделю на npm, что на порядок больше любого конкурента. Исходники лежат в открытом доступе на GitHub, лицензия MIT, платить не нужно.

Что на нём делают на практике:

• Карточки товаров с поворотом. Мебель, обувь, техника, украшения. Покупатель крутит вещь, вместо того чтобы гадать по пяти фотографиям
• Конфигураторы. Собери свою машину, кухню, кроссовок. Меняешь цвет и комплектацию, картинка перестраивается сразу
• Промостраницы и презентации. Долгий скролл, вдоль которого летит или разбирается трёхмерный объект
• Браузерные игры. Небольшие аркады, головоломки, гиперказуальные проекты
• Визуализация данных. Карты, графы связей, планы зданий, медицинские модели
• Виртуальные туры. Квартиры, музеи, производственные площадки

Работает всё это на обычном мобильном телефоне: браузеры на Android и iOS давно умеют трёхмерную графику. Оговорка одна, и она про производительность. Телефон считает сцену медленнее ноутбука и быстрее греется, поэтому под мобильные обычно готовят облегчённую версию: меньше полигонов, текстуры поменьше, отключённые тени. Проверять сцену на телефоне стоит с первого дня, а не в конце проекта.

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

Коротко о главном. Three.js не рисует модели и не заменяет 3D-редактор. Он берёт готовую геометрию и показывает её в браузере, позволяя управлять всем этим на JavaScript.

Three.js, WebGL и Blender: кто за что отвечаетСкопировано

Три названия, которые новички постоянно путают. Разложим по полочкам.

WebGL это встроенная в браузер технология, которая даёт странице доступ к видеокарте. Именно видеокарта считает миллионы треугольников и выдаёт картинку. WebGL появился в 2011 году, актуальная версия WebGL 2 поддерживается всеми живыми браузерами: Chrome, Firefox, Safari, Edge, Яндекс.Браузер. Проверить поддержку в конкретном браузере можно на caniuse.com.

Проблема WebGL в том, что писать на нём напрямую тяжело. Чтобы показать один вращающийся кубик, нужны сотни строк кода, ручная работа с матрицами и понимание линейной алгебры. Мало кто готов на такое ради карточки товара.

Three.js закрывает эту сложность собой. Он берёт на себя матрицы, шейдеры и общение с видеокартой, а вам отдаёт понятные объекты: сцена, камера, куб, лампа. Тот же вращающийся кубик собирается за пару десятков строк. Для WebGL библиотека Three.js примерно то же, чем когда-то был jQuery для голого JavaScript.

Blender вообще из другой области. Это редактор, в котором художник лепит саму модель: задаёт форму, разворачивает текстуры, настраивает материалы. Three.js модели не создаёт, он их показывает.

CheckroiПодборка курсов по Blender124 курса • 31 школаСравните цены, школы, программу и найдите выгодные предложения по обучениюСравнить→

Нормальный рабочий процесс выглядит так: модель делают в Blender или 3ds Max, экспортируют в формат GLTF, а Three.js подгружает файл на страницу и добавляет управление мышкой. Если вас тянет именно в лепку моделей, а не в код, вам к курсам по 3D-графике, это другая профессия и другой инструментарий.

Как проверить, поддерживает ли браузер WebGL

Прежде чем искать ошибку в своём коде, стоит убедиться, что браузер вообще умеет трёхмерную графику. Самый быстрый способ: откройте страницу get.webgl.org. Если крутится кубик, всё в порядке.

Более подробную картину даёт сервис WebGL Report: он покажет версию, название видеокарты и ограничения, например максимальный размер текстуры. Это пригодится, когда сцена работает у вас, но не работает у заказчика.

Если поддержки нет, причин обычно три:

• Аппаратное ускорение выключено в настройках браузера. В Chrome и Яндекс.Браузере ищите пункт «Использовать аппаратное ускорение» в разделе «Система», после включения браузер нужно перезапустить
• Устаревшие драйверы видеокарты. Особенно частая история на старых ноутбуках с Windows
• Экономия батареи или удалённый рабочий стол. В таких режимах доступ к видеокарте иногда отключают принудительно

В боевом проекте на такой случай делают запасной вариант: показывают обычную картинку вместо трёхмерной сцены. Three.js умеет сообщить о проблеме сам, если обернуть создание рендерера в проверку через try.

Отсюда ответ на частый вопрос: учить ли WebGL перед Three.js. Не нужно. Понимания, что «где-то там работает видеокарта», на старте достаточно. К шейдерам и низкоуровневым вещам приходят через год-два, когда упираются в потолок готовых материалов.

Как подключить Three.js в 2026 годуСкопировано

Здесь начинается самое важное место статьи, из-за которого у новичков чаще всего ничего не работает.

Много лет Three.js подключали одной строчкой: скачивали файл three.min.js и вставляли обычный тег <script>. Этот способ до сих пор кочует по туториалам, видеоурокам и ответам на форумах. Люди даже целенаправленно ищут в поиске «three js min», пытаясь найти тот самый файл.

Этого файла больше не существует. Сборку без модулей убрали из проекта, и в официальной документации Three.js старый способ прямо помечен словом WRONG, то есть «неправильно». Скопированный из статьи 2020 года код просто не запустится, а в консоли появится ошибка вида «THREE is not defined». Рендерер отдаёт готовый canvas, который вы сами вставляете в страницу, поэтому пригодится понимание того, как устроено DOM-дерево в JavaScript.

Проверьте прямо сейчас. Если в найденном туториале есть строка со ссылкой на three.min.js и версией вроде r128, материал устарел минимум на три года. Код оттуда работать не будет, ищите другой источник.

Актуальный способ называется import map, то есть карта импортов. Вы один раз объясняете браузеру, по какому адресу лежит библиотека, и дальше пишете человеческое import * as THREE from 'three'. Библиотека тянется с CDN, то есть с публичного сервера, откуда её раздают всем желающим. Скачивать и класть файлы к себе не нужно.

Вот минимальная заготовка страницы:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Моя первая 3D-сцена</title>
  <style> body { margin: 0; } </style>
</head>
<body>

<script type="importmap">
{
  "imports": {
    "three": "https://cdn.jsdelivr.net/npm/three@0.185.1/build/three.module.js",
    "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.185.1/examples/jsm/"
  }
}
</script>

<script type="module">
  import * as THREE from 'three';
  import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

  // здесь будет код сцены
</script>

</body>
</html>

Три детали, на которых спотыкаются:

1. Атрибут type="module" обязателен. Без него браузер не поймёт слово import и выдаст синтаксическую ошибку
2. Блок с картой импортов идёт раньше блока с кодом. Браузер читает страницу сверху вниз, и к моменту импорта адрес библиотеки уже должен быть известен
3. Версия прописана явно, а не через плавающие обозначения вроде latest. Так ваша страница не сломается в день, когда выйдет следующий релиз

Второй путь для тех, кто уже собирает проекты через сборщик: установить пакет командой npm install three и импортировать так же, картой импортов заниматься уже не нужно. Новичку удобнее начать с первого варианта: он работает в одном HTML-файле, без установки Node.js.

Отдельно про three/addons/. Часть возможностей вроде управления камерой мышкой или загрузчика моделей лежит не в ядре библиотеки, а в дополнениях. Раньше путь к ним писали как three/examples/jsm/, и такой код тоже встречается в старых статьях. Сейчас канонический адрес именно three/addons/.

Три кита любой сцены: сцена, камера, рендерерСкопировано

Любая программа на Three.js, от кубика до конфигуратора автомобиля, стоит на трёх сущностях. Понять их проще всего через аналогию с киносъёмкой.

Сцена (Scene) это съёмочная площадка. Контейнер, куда вы складываете всё, что должно попасть в кадр: объекты, лампы, иногда фон. Сама по себе сцена ничего не показывает, она просто держит список.

Камера (Camera) это точка зрения. Она решает, откуда мы смотрим на площадку и насколько широкий угол обзора захватываем. Камер бывает несколько типов, новичку нужна PerspectiveCamera: она даёт привычную перспективу, где дальние предметы мельче ближних. Библиотека работает поверх обычного JavaScript, и без него дальше не уехать: чем занимается JavaScript-разработчик.

Рендерер (Renderer) это оператор с камерой в руках. Он берёт сцену, смотрит на неё через камеру и рисует результат в элемент <canvas> на странице. Рендеринг это и есть процесс превращения описания сцены в готовую картинку из пикселей.

Четвёртая сущность появляется, как только вы захотите что-то показать. Меш (Mesh) это конкретный объект в сцене, и собирается он из двух частей:

• Геометрия отвечает за форму: где вершины, как они соединены в треугольники
• Материал отвечает за внешний вид: цвет, блеск, прозрачность, текстура

Куб красного цвета получается сложением геометрии куба и красного материала. Хотите тот же куб зелёным: меняете только материал, геометрия остаётся прежней.

Почему это стоит запомнить. Разделение на геометрию и материал экономит память. Одну геометрию можно переиспользовать для сотни объектов, дав каждому свой материал.

Первая сцена за 30 строк кодаСкопировано

Соберём вращающийся куб, который можно крутить мышкой. Код ниже полностью рабочий на r185, вставляйте его внутрь блока <script type="module"> из заготовки выше.

import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

// 1. Сцена
const scene = new THREE.Scene();

// 2. Камера: угол обзора, пропорции экрана, ближняя и дальняя границы видимости
const camera = new THREE.PerspectiveCamera(
  75, window.innerWidth / window.innerHeight, 0.1, 1000
);
camera.position.z = 5;

// 3. Рендерер
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(window.devicePixelRatio);
document.body.appendChild(renderer.domElement);

// 4. Управление камерой мышкой
const controls = new OrbitControls(camera, renderer.domElement);

// 5. Свет
scene.add(new THREE.AmbientLight(0x404040));
const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(5, 5, 5);
scene.add(light);

// 6. Сам куб
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshStandardMaterial({ color: 0x00ff88 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// 7. Реакция на изменение размера окна
window.addEventListener('resize', () => {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
});

// 8. Цикл анимации
function animate() {
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  controls.update();
  renderer.render(scene, camera);
}
renderer.setAnimationLoop(animate);

Пройдёмся по неочевидным местам.

Почему camera.position.z = 5. По умолчанию и камера, и куб стоят в одной точке с координатами (0, 0, 0), то есть камера находится внутри куба и ничего не видит. Отодвигаем её на пять единиц назад.

Что за antialias: true. Сглаживание краёв. Без него грани куба выглядят лесенкой из пикселей. Стоит немного производительности, но на современных устройствах разница незаметна.

Зачем setPixelRatio. На экранах с высокой плотностью пикселей, вроде Retina у Apple, без этой строки картинка получается мыльной.

Что делает setAnimationLoop. Это цикл, который вызывает вашу функцию примерно 60 раз в секунду, и на каждом вызове куб чуть поворачивается. Раньше для этого писали requestAnimationFrame, но у современного способа есть важное преимущество: он корректно работает в шлемах виртуальной реальности и сам останавливается, когда вкладка уходит в фон.

Что даёт OrbitControls. Возможность вращать сцену зажатой левой кнопкой мыши и приближать колёсиком. Строка controls.update() внутри цикла нужна для плавного затухания движения.

Сохраните файл, откройте его в браузере через локальный сервер (почему именно так, разберём чуть ниже), и вы увидите зелёный куб, который вращается и слушается мышку. Это уже полноценная трёхмерная сцена. Если писать код ради сцены не хочется, есть путь без него: 3D-редактор Spline собирает похожие сцены мышкой.

Дальше полезно поиграть с этим же файлом, ничего не переписывая с нуля. Поменяйте BoxGeometry на SphereGeometry или TorusKnotGeometry и посмотрите, что получится. Добавьте в материал свойство metalness: 1 и roughness: 0.2, объект станет похож на полированный металл. Подвиньте источник света в другую точку и понаблюдайте, как меняется объём. Такие эксперименты за полчаса дают больше понимания, чем три просмотренных видеоурока.

Свет, материалы и своя 3D-модельСкопировано

Куб быстро надоедает. Дальше обычно хотят две вещи: чтобы объект красиво выглядел и чтобы это был не куб, а что-то своё.

Материалы

Материал определяет, как поверхность реагирует на свет. Основных вариантов три:

• MeshBasicMaterial вообще не реагирует на освещение и всегда показывает заданный цвет. Удобен для отладки: если объект пропал, временно поставьте этот материал и поймёте, дело в геометрии или в свете
• MeshStandardMaterial рабочая лошадка. Физически корректно отражает свет, умеет металличность и шероховатость. Берите его, если сомневаетесь
• MeshPhysicalMaterial старший брат предыдущего с дополнительными эффектами вроде лака и прозрачности стекла. Тяжелее по производительности

Свет

Важный момент: MeshStandardMaterial без источников света выглядит полностью чёрным. Это причина примерно каждого третьего вопроса на форуме Three.js. Минимальный рабочий набор выглядит так:

• AmbientLight равномерно подсвечивает всё вокруг, убирая полностью чёрные тени. Сам по себе даёт плоскую картинку
• DirectionalLight светит параллельными лучами из бесконечности, как солнце. Именно он создаёт объём
• PointLight светит во все стороны из точки, как лампочка

Рабочая связка для старта: слабый ambient плюс один directional, поставленный сбоку и сверху.

Загрузка своей модели

Модели в веб возят в формате GLTF или его двоичной версии GLB. Формат придумали специально для интернета: он компактный, быстро разбирается и умеет хранить сразу геометрию, материалы, текстуры и анимации. Blender экспортирует в GLTF из коробки. Саму модель нужно откуда-то взять: есть пять способов создать 3D-модель, от нейросети до Blender.

import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';

const loader = new GLTFLoader();

loader.load(
  'model.glb',
  (gltf) => {
    scene.add(gltf.scene);
  },
  undefined,
  (error) => {
    console.error('Модель не загрузилась:', error);
  }
);

Последний аргумент это обработчик ошибок, и его стоит писать всегда. Без него неудачная загрузка ничем себя не выдаёт: вы видите пустой экран и не понимаете причину.

Про вес моделей. Файл на 50 МБ технически загрузится, но посетитель с мобильного интернета уйдёт раньше. Для веба модели упрощают до десятков тысяч полигонов и сжимают текстуры, обычный ориентир это единицы мегабайт.

Канал основателя Checkroi Вани БуявцаЗабирайте промпты и обучение по нейросетям в моём Телеграм-каналеБольше 3 700 человек уже применяют Claude Code, ChatGPT и другие нейросети в работе, учёбе, бизнесе и жизниПерейти в канал→

Пять причин, по которым у новичка чёрный экранСкопировано

Самая частая жалоба звучит одинаково: «скопировал код, открыл, ничего нет». Разберём причины по убыванию частоты.

Причина 1: файл открыт двойным кликом

Вы открыли HTML-файл из проводника, и в адресной строке видно file:///. В таком режиме браузер запрещает странице подгружать соседние файлы: модели, текстуры, иногда саму библиотеку. В консоли появляется ошибка со словом CORS, а на экране чернота.

CORS это правило безопасности браузера, которое ограничивает обращение к файлам из другого источника. Локальный файл считается источником «никаким», поэтому запрещено почти всё.

Лечится запуском локального сервера, это одна команда в папке проекта:

python3 -m http.server 8000

После чего страница открывается по адресу http://localhost:8000. Есть альтернативы: команда npx serve, если стоит Node.js, или расширение Live Server в редакторе VS Code.

Причина 2: устаревший код из туториала

Разбирали выше. Ошибка «THREE is not defined» или жалоба на неизвестный импорт означает, что материал написан под старую версию библиотеки.

Причина 3: камера внутри объекта

Забыли отодвинуть камеру, и она стоит в центре куба. Формально всё рисуется, просто мы смотрим на объект изнутри. Помогает camera.position.z = 5.

Причина 4: нет источников света

Сцена с MeshStandardMaterial и без ламп выглядит чёрным прямоугольником. Быстрая проверка: временно замените материал на MeshBasicMaterial. Если объект появился, проблема была в освещении.

Причина 5: цикл анимации не запущен

Функция animate написана, но её никто не вызвал, либо забыт сам renderer.render(). Сцена существует в памяти, но ни разу не отрисовалась.

Универсальный совет на все пять случаев: откройте консоль разработчика клавишей F12 и прочитайте, что там красным. В девяти случаях из десяти браузер прямым текстом называет проблему.

CheckroiПодборка курсов по разработке игр144 курса • 31 школаСравните цены, школы, программу и найдите выгодные предложения по обучениюСравнить→

Three.js, Babylon.js и React Three Fiber: что когда братьСкопировано

Три главных имени в браузерном 3D. Выбор проще, чем кажется.

Важная деталь про React Three Fiber: это не отдельный движок, а обёртка вокруг того же самого Three.js. Все знания переносятся один в один, меняется только способ записи. Поэтому учить R3F вместо Three.js бессмысленно, разумнее сначала разобраться с основой.

Если непонятно, что выбрать, берите Three.js. Ответов на форумах и готовых примеров по нему в разы больше, и это решает на старте больше, чем любые технические различия.

Отдельная строка про WebGPU. Это новая технология доступа к видеокарте, более быстрая, чем WebGL, и Three.js её уже поддерживает через отдельный рендерер. Новичку она пока не нужна: поддержка в браузерах моложе, примеров меньше, а разницу вы почувствуете только на тяжёлых сценах.

Что учить до Three.js и куда двигаться дальшеСкопировано

Минимальный набор перед стартом небольшой: HTML, CSS и базовый JavaScript. Понимать функции, объекты, массивы, стрелочные функции и как подключить скрипт к странице. Понадобится ещё представление о DOM-дереве, потому что канвас с трёхмерной сценой живёт на обычной веб-странице рядом с остальной вёрсткой.

Математика на входе не нужна. Векторы и матрицы спрятаны внутри библиотеки, а понимание координатных осей приходит за первый вечер экспериментов. Тригонометрия пригодится позже, когда захотите свои траектории движения.

Дальнейший маршрут обычно выглядит так:

1. Собрать первую сцену с кубом и управлением мышкой, разобрать каждую строку
2. Заменить куб на свою модель в формате GLB
3. Разобраться со светом и тенями, добиться приличной картинки
4. Добавить реакцию на клики по объектам и привязку анимации к скроллу
5. Заняться производительностью: количество полигонов, вес текстур, поведение на мобильных
6. Дойти до шейдеров, если захочется собственных эффектов

Три.js редко бывает самостоятельной профессией. Обычно это сильное дополнение к фронтенду, за которое хорошо платят: разработчик, умеющий собрать интерактивный конфигуратор, стоит заметно дороже верстальщика. Посмотрите разбор профессии JavaScript-разработчика и пошаговый план, как стать фронтенд-разработчиком, чтобы понять, куда встраивается трёхмерка.

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

Разбираться по разрозненным туториалам можно, но именно на них новички и напарываются на устаревший код. Системный курс экономит те самые вечера, которые уходят на отладку чужих ошибок. Мы собрали программы по JavaScript и фронтенду в одном месте, с ценами и отзывами:

Курс	Школа	Стоимость со скидкой	В рассрочку	Длитель­ность	Обзор курса от Checkroi
JavaScript Перейти на сайт курса	Skillbox	63 829 ₽	4086 ₽/мес.	3 месяца	Обзор курса
Факультет fullstack JavaScript Перейти на сайт курса	GeekBrains	134 700 ₽	3742 ₽/мес.	15 месяцев	Обзор курса
Node.js-разработчик Перейти на сайт курса	Эдюсон	95 000 ₽	3958 ₽/мес.	8 месяцев	Обзор курса
Fullstack-разработчик на JavaScript Перейти на сайт курса	Эдюсон	158 760 ₽	6615 ₽/мес.	11 месяцев	Обзор курса
Фулстек-разработчик на JavaScript Перейти на сайт курса	Skillbox	153 348 ₽	4296 ₽/мес.	11 месяцев	Обзор курса
Fullstack-разработчик на Node.js Перейти на сайт курса	Hexlet	125 100 ₽	7141 ₽/мес.	12 месяцев	Обзор курса
Backend-разработка на Node.js Перейти на сайт курса	Нетология	45 000 ₽	2500 ₽/мес.	6 месяцев	Обзор курса
Fullstack разработчик JavaScript Перейти на сайт курса	OTUS	75 000 ₽	20 000 ₽/мес.	6 месяцев	Обзор курса
Автоматизированное тестирование веб-приложений на JavaScript Перейти на сайт курса	Skillbox	42 900 ₽	3575 ₽/мес.	4 месяца	Обзор курса
Node.js-разработчик Перейти на сайт курса	Hexlet	74 970 ₽	4280 ₽/мес.	10 месяцев	Обзор курса

• 

  JavaScript

  Skillbox63 829 ₽4086 ₽/мес3 месяца
  Перейти на сайт курсаОбзор
• 

  Факультет fullstack JavaScript

  GeekBrains134 700 ₽3742 ₽/мес15 месяцев
  Перейти на сайт курсаОбзор
• 

  Node.js-разработчик

  Эдюсон95 000 ₽3958 ₽/мес8 месяцев
  Перейти на сайт курсаОбзор
• 

  Fullstack-разработчик на JavaScript

  Эдюсон158 760 ₽6615 ₽/мес11 месяцев
  Перейти на сайт курсаОбзор
• 

  Фулстек-разработчик на JavaScript

  Skillbox153 348 ₽4296 ₽/мес11 месяцев
  Перейти на сайт курсаОбзор
• 

  Fullstack-разработчик на Node.js

  Hexlet125 100 ₽7141 ₽/мес12 месяцев
  Перейти на сайт курсаОбзор
• 

  Backend-разработка на Node.js

  Нетология45 000 ₽2500 ₽/мес6 месяцев
  Перейти на сайт курсаОбзор
• 

  Fullstack разработчик JavaScript

  OTUS75 000 ₽20 000 ₽/мес6 месяцев
  Перейти на сайт курсаОбзор
• 

  Автоматизированное тестирование веб-приложений на JavaScript

  Skillbox42 900 ₽3575 ₽/мес4 месяца
  Перейти на сайт курсаОбзор
• 

  Node.js-разработчик

  Hexlet74 970 ₽4280 ₽/мес10 месяцев
  Перейти на сайт курсаОбзор

Больше программ — в полном каталоге курсов по JavaScript

Если хочется сначала пощупать трёхмерку без кода, вернитесь к Spline: там сцену собирают мышкой, а потом её можно выгрузить и подхватить тем же Three.js. А тем, кому интереснее создавать сами модели, дорога в 3D-моделирование.