3D: Three.js и WebGL

Браузер умеет рисовать 3D через WebGL. Three.js прячет низкоуровневые детали: вы описываете сцену, камеру и объекты, а библиотека рендерит изображение.

Первая сцена

import * as THREE from "three";

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, innerWidth / innerHeight, 0.1, 100);
const renderer = new THREE.WebGLRenderer();
document.body.append(renderer.domElement);

const box = new THREE.Mesh(
  new THREE.BoxGeometry(1, 1, 1),
  new THREE.MeshNormalMaterial()
);
scene.add(box);
camera.position.z = 3;

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

Почему это работает

• scene — что рисуем; camera — откуда смотрим; renderer — как выводим на canvas;
• Mesh — геометрия + материал: форма и внешний вид объекта;
• requestAnimationFrame — цикл анимации: каждый кадр меняем параметры и рендерим заново;
• освещение и текстуры добавляются опционально (DirectionalLight, MeshStandardMaterial).