Учебник Three.js

Введение в трёхмерную графику для веба
- Как браузер рендерит 3D
- WebGL: что происходит под капотом
- Место Three.js в экосистеме WebGL
- Установка и подключение библиотеки
- Структура типичного Three.js-приложения
- Инструменты разработчика и отладка сцены
Основы сцены
- Scene: контейнер всех объектов
- Camera: типы и их назначение
- PerspectiveCamera: поле зрения, соотношение сторон, near и far
- OrthographicCamera: параметры и область применения
- Renderer: WebGLRenderer и его настройки
- Цикл анимации: requestAnimationFrame и метод render
- Адаптация к размеру окна браузера
- Антиалиасинг и настройки качества рендеринга
Геометрия
- BufferGeometry: внутреннее устройство
- Атрибуты вершин: position, normal, uv, color
- Встроенные примитивы: BoxGeometry
- Встроенные примитивы: SphereGeometry
- Встроенные примитивы: CylinderGeometry и ConeGeometry
- Встроенные примитивы: PlaneGeometry и CircleGeometry
- Встроенные примитивы: TorusGeometry и TorusKnotGeometry
- Встроенные примитивы: PolyhedronGeometry и производные
- Встроенные примитивы: TubeGeometry, LatheGeometry, ExtrudeGeometry
- Построение геометрии вручную через Float32Array
- Индексированная геометрия: index и экономия памяти
- Вычисление нормалей: computeVertexNormals
- Группы геометрии и многоматериальные меши
- Клонирование и слияние геометрий
Материалы
- Модель освещения и типы материалов
- MeshBasicMaterial: без освещения
- MeshLambertMaterial: диффузное освещение
- MeshPhongMaterial: зеркальные блики
- MeshStandardMaterial: физически корректный PBR
- MeshPhysicalMaterial: расширенный PBR
- MeshToonMaterial: cel-shading
- MeshDepthMaterial и MeshNormalMaterial
- MeshMatcapMaterial
- PointsMaterial
- LineBasicMaterial и LineDashedMaterial
- SpriteMaterial
- Общие свойства материалов: side, transparent, opacity, depthWrite
- Blending-режимы
- Wireframe и flatShading
- Клонирование и переиспользование материалов
Текстуры
- TextureLoader и загрузка изображений
- Структура объекта Texture
- UV-развёртка и маппинг координат
- Фильтрация: magFilter, minFilter и MipMap
- Форматы текстур и сжатие
- Повторение и смещение: repeat, offset, wrapS, wrapT
- Карта нормалей (normalMap)
- Карта смещений (displacementMap)
- Карта шероховатости и металличности (roughnessMap, metalnessMap)
- Карта окружающего затенения (aoMap)
- Карта эмиссии (emissiveMap)
- Карта окружения (envMap) и отражения
- CubeTexture и CubeTextureLoader
- CanvasTexture: текстура из элемента canvas
- VideoTexture: текстура из видео
- DataTexture: текстура из массива данных
- Компрессированные текстуры: KTX2 и Basis
Освещение
- Принципы расчёта освещения в Three.js
- AmbientLight
- DirectionalLight и его тени
- PointLight: радиус и затухание
- SpotLight: угол конуса и полутень
- HemisphereLight
- RectAreaLight
- LightProbe и освещение на основе окружения (IBL)
- Тени: shadowMap и типы PCFShadowMap, VSMShadowMap
- Настройка камеры тени: shadowCamera
- Производительность и ограничение источников света
Объекты сцены
- Object3D: базовый класс и его свойства
- Mesh: геометрия и материал
- Points: системы частиц
- Line, LineSegments, LineLoop
- Sprite: плоский объект всегда лицом к камере
- Group: группировка объектов
- Иерархия сцены и дерево объектов
- Трансформации: position, rotation, scale
- Quaternion и вращение без блокировки осей
- Matrix4: матрицы трансформации
- lookAt: направление объекта на точку
- Видимость, слои (layers) и маски
- userData: произвольные данные на объекте
Загрузка внешних моделей
- LoadingManager: централизованное управление загрузкой
- GLTFLoader: основной формат 3D-моделей
- Структура glTF-файла: меши, материалы, анимации, сцены
- DRACOLoader: декомпрессия геометрии
- MeshoptDecoder: альтернативная компрессия
- OBJLoader и MTLLoader
- FBXLoader
- STLLoader
- Встраивание ресурсов: glb против gltf
- Traversal: обход дерева загруженной модели
- Извлечение и замена материалов загруженной модели
Анимация
- AnimationClip и AnimationAction
- AnimationMixer: воспроизведение и управление
- Треки анимации: KeyframeTrack и его подтипы
- Смешивание анимаций: crossFadeTo и weight
- Анимация по кривым: CatmullRomCurve3 и QuadraticBezierCurve3
- AnimationObjectGroup
- Создание анимаций вручную
- Морф-анимация: morphTargetInfluences
- Скелетная анимация: Skeleton, Bone, SkinnedMesh
- AnimationUtils: вспомогательные методы
- Экспорт анимаций из Blender в glTF
Камера и управление
- OrbitControls: вращение, зум, панорамирование
- TrackballControls
- FlyControls и FirstPersonControls
- PointerLockControls: шутер от первого лица
- TransformControls: манипулятор объектов на сцене
- Ограничения и настройки OrbitControls
- Программное управление камерой
- Плавное перемещение камеры с GSAP и Tween.js
- Несколько камер и сплит-экран
Raycasting и интерактивность
- Raycaster: принцип работы
- Определение пересечений с объектами
- Клик и hover на объекты сцены
- Intersect: свойства точки пересечения
- Raycasting и instancedMesh
- Оптимизация: BVH и three-mesh-bvh
- Drag-and-drop объектов в 3D
- Привязка к плоскости и поверхности
Постобработка
- EffectComposer: цепочка эффектов
- RenderPass: базовый рендер-пасс
- Bloom: свечение ярких областей (UnrealBloomPass)
- SSAO: окружающее затенение в экранном пространстве
- FXAA и SMAA: сглаживание в постобработке
- DepthOfField: размытие вне фокуса (BokehPass)
- FilmPass: зернистость и строки развёртки
- GlitchPass: эффект глитча
- OutlinePass: контур вокруг объектов
- Написание собственного шейдерного пасса (ShaderPass)
- Порядок пассов и производительность
Шейдеры и GLSL
- Вершинный и фрагментный шейдеры: роли и взаимодействие
- Типы данных GLSL: float, vec2, vec3, vec4, mat4
- Uniform, attribute, varying: передача данных
- ShaderMaterial: полностью кастомный материал
- RawShaderMaterial: без встроенных uniform Three.js
- Встроенные uniform Three.js в шейдерах
- Chunки Three.js: переиспользование кода шейдеров
- onBeforeCompile: патчинг встроенных материалов
- Процедурные текстуры в шейдере
- Шум: алгоритм Perlin и Simplex в GLSL
- Передача времени и пользовательских данных в шейдер
- Отладка шейдеров
Процедурная геометрия и математика
- Vector2, Vector3, Vector4: операции и методы
- Euler и Quaternion: сравнение подходов
- Matrix3 и Matrix4: умножение, инверсия, транспонирование
- Box3, Sphere: ограничивающие объёмы
- Plane и Ray: математические примитивы
- MathUtils: вспомогательные функции
- Кривые: CatmullRomCurve3, CubicBezierCurve3
- CurvePath и TubeGeometry на основе кривой
- Параметрические поверхности
- Процедурный ландшафт на основе шума
Среда и фон сцены
- Цвет фона и прозрачный фон
- CubeMap как скайбокс
- Equirectangular-панорама как фон
- PMREMGenerator: предвычисление освещения из HDR
- RGBELoader: загрузка HDR-изображений
- Fog и FogExp2: туман
- Environment map и его влияние на PBR-материалы
Производительность и оптимизация
- Профилирование: Stats.js и Chrome DevTools
- Drawcall: что это и как уменьшить
- InstancedMesh: рендеринг тысяч идентичных объектов
- Frustum culling: автоматическое и ручное
- LOD: уровни детализации
- Merging geometries: BufferGeometryUtils.mergeGeometries
- Dispose: освобождение памяти GPU
- Texture atlasing
- Передача данных в воркер: OffscreenCanvas
- Оценка бюджета производительности
Рендеринг вне экрана и специальные техники
- WebGLRenderTarget: рендеринг в текстуру
- Зеркала и порталы через RenderTarget
- CubeCamera: динамические отражения
- Тени на плоскости: MeshShadowMaterial и плоские тени
- Depth texture и пользовательское использование буфера глубины
- Stencil buffer: маски и трафареты
- MRT: рендеринг в несколько текстур одновременно
Физика и симуляция
- Интеграция cannon-es в Three.js-проект
- Синхронизация физических тел и визуальных мешей
- Интеграция rapier.js
- Коллайдеры: box, sphere, capsule, trimesh
- Силы, импульсы и ограничения
- Определение коллизий и события
- Симуляция ткани и мягких тел
- Партиклы и симуляция жидкости на GPU
Текст и UI в 3D-пространстве
- TextGeometry и FontLoader
- Troika-three-text: производительный текст в 3D
- Sprite-based UI: billboard-элементы
- HTML-оверлей поверх canvas
- CSS3DRenderer: DOM-элементы в 3D-пространстве
- CSS2DRenderer: лейблы и аннотации
Работа с данными и динамические сцены
- Динамическое обновление атрибутов геометрии
- needsUpdate: когда и как использовать
- Динамическое добавление и удаление объектов
- Сериализация и десериализация сцены: ObjectLoader
- Экспорт сцены в glTF через GLTFExporter
- Генерация скриншота из canvas
- Запись видео с canvas через MediaRecorder