Подключение: npm, CDN и ES-модули

Два пути запустить Three.js: «по-взрослому» через npm-сборку и «за минуту» через CDN с import map.

Современный Three.js поставляется как ES-модули. Импортировать ядро принято так: import * as THREE from 'three', а дополнения — из three/addons/....

Способ 1. npm + Vite (для проектов)

Если вы делаете настоящий проект, ставьте Three.js как обычный npm-пакет. В пару с ним удобно взять быстрый сборщик Vite.

npm create vite@latest my-3d-app
cd my-3d-app
npm install
npm install three
npm run dev

Дальше импортируете библиотеку прямо в JS-файле. Сборщик сам найдёт пакет в node_modules и соберёт оптимизированный бандл.

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

const scene = new THREE.Scene();
// ... остальной код

Способ 2. CDN + import map (быстрый старт)

Чтобы попробовать Three.js без установки, достаточно одного HTML-файла. Современный подход — import map: он говорит браузеру, по какому адресу искать модуль с именем three. Это позволяет писать те же «голые» импорты, что и в проекте.

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <title>Three.js</title>
</head>
<body>
  <script type="importmap">
  {
    "imports": {
      "three": "https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js",
      "three/addons/": "https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/"
    }
  }
  </script>
  <script type="module" src="main.js"></script>
</body>
</html>

Обратите внимание на type="module" у тега <script> — без него современный синтаксис import работать не будет. Файл main.js подключается как модуль и может импортировать three по имени благодаря import map.

Ядро и дополнения (addons)

Сам пакет three — это рендеринг, геометрии, материалы, камеры. А популярные удобства лежат отдельно, в addons (исторически — папка examples/jsm):

Импорт	Что даёт
`three/addons/controls/OrbitControls.js`	вращение сцены мышью
`three/addons/loaders/GLTFLoader.js`	загрузка 3D-моделей .gltf/.glb
`three/addons/libs/...`	вспомогательные библиотеки

Про версии

Three.js развивается очень быстро, версии нумеруются как 0.160.0, 0.161.0 и так далее. Между версиями иногда меняется API. Поэтому в CDN всегда указывайте конкретную версию (а не «latest»), а в проекте фиксируйте её в package.json. Иначе обновление способно внезапно сломать рабочий код.

Итог

Для проектов: npm install three + сборщик (Vite).
Для быстрого старта: один HTML с importmap и <script type="module">.
Ядро — пакет three; OrbitControls, загрузчики и прочее — из three/addons/.
Фиксируйте конкретную версию — API меняется между релизами.