Основы Three.js: сцена, камера, свет, анимация и glTF

Что такое Three.js

Three.js — библиотека поверх WebGL (и нового WebGPU). В чистом WebGL шейдеры, буферы и матрицы пишутся вручную. Three.js прячет это за объектами: Scene, Camera, Mesh, Light. Вы описываете 3D-мир, а renderer рисует его в <canvas>.

Установка: npm install three, дальше импортируем нужное. Дополнения (управление, загрузчики) лежат в three/addons/.

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

💡 Без сборщика те же имена можно подключить через importmap в HTML: он указывает на CDN или на вашу копию из node_modules.

Координаты: ось y смотрит вверх, z — на вас, все углы задаются в радианах (Math.PI — это 180 градусов).

Scene, camera, renderer

Любой код на Three.js начинается с трёх объектов.

import * as THREE from 'three';

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
  60, innerWidth / innerHeight, 0.1, 100
);
camera.position.z = 5;

const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);

renderer.render(scene, camera);