NETROOM
React-рендерер для Three.js: сцена описывается деревом компонентов, а не императивными вызовами, useFrame даёт кадровый цикл, useThree - доступ к камере и рендереру. Абстракцией это не назвать: Three всё равно надо знать, пакет лишь меняет способ сборки сцены и даёт реконсиляцию. Версия 9 требует React строго 19 (до 19.3) и three от 0.156. Работает и в React Native через expo-gl. MIT, pmndrs, только клиент.
Ящик готовых деталей к react-three-fiber: OrbitControls, Environment, Text и Html, загрузчики useGLTF и useTexture, инстансинг, готовые материалы и шейдерные эффекты. Экономит недели по сравнению с ручным Three.js. Импортируйте точечно: пакет тянет два десятка зависимостей - troika-three-text, three-stdlib, camera-controls. Версия 10 требует R3F 9, React 19 и three от 0.159. MIT, релизы частые, только клиент.
База для всего 3D в вебе: сцены, камеры, материалы, освещение, загрузчики моделей, постобработка. Версии идут ревизиями (r185), API между ними ломается без церемоний - фиксируйте точную версию и читайте migration guide. Кроме WebGL есть WebGPU-рендерер и язык шейдеров TSL через подпути `three/webgpu` и `three/tsl`. Свои типы пакет не поставляет, ставьте @types/three в ту же ревизию. Вес серьёзный, аддоны берите точечно из `three/addons`. MIT, релизы ежемесячные.
Физика для сцен на react-three-fiber: движок Rapier на Rust, скомпилированный в WASM, подключается декларативно - оборачиваете меш в RigidBody, добавляете коллайдеры, сенсоры, джойнты и силы. Быстрее и точнее старых JS-движков. Учтите: WASM-бандл грузится асинхронно, требуется R3F 9 и React 19, а последний релиз 2.2.0 - ноябрь 2025. В манифесте npm лицензия не проставлена, в репозитории MIT, сам Rapier - Apache-2.0.
Панель для кручения значений в реальном времени: useControls возвращает числа, цвета, векторы, файлы - и всё это сразу в компоненте, без ручной сборки GUI. Стандарт де-факто в R3F-туториалах и незаменима при подборе параметров шейдера или света. Работает с React 18 и 19, к three не привязана. Помните две вещи: версия всё ещё 0.x и API может поехать, а панель тянет Radix и stitches - в прод её обычно прячут за флагом или динамическим импортом.
Готовый компонент для графа с силовой раскладкой в 3D: узлы, рёбра, зум, клики - всё из коробки, на three и d3-force-3d. Берут, когда нужно показать связи (сеть, зависимости, соцграф) на обычной странице без React. Живой, релизы регулярные, но peer-диапазон жёсткий: three >=0.179, старую версию не подсунуть. Тянет за собой three-forcegraph, three-render-objects и kapsule, так что бандл заметный. Есть родня: force-graph (2D), aframe/vr-варианты и react-force-graph-3d для React.
Официальные JS-биндинги к Rapier - физическому движку на Rust, собранному в wasm. Быстрый, детерминированный, с CCD, джойнтами, character controller и сериализацией мира. Это «сырой» ESM-пакет: .wasm лежит отдельным файлом, сборщик должен уметь wasm-модули (Vite - через плагин, webpack - asyncWebAssembly). Если возиться неохота, берите rapier3d-compat. Лицензия Apache-2.0. Обновляется активно, но минорные версии ломают API - фиксируйте версию.
Тот же Rapier, но wasm зашит в JS как base64 - никакой возни со сборщиком, работает где угодно, включая старые конфиги webpack и CDN-сценарии. Расплата: бандл толще на пару мегабайт до gzip и обязательный await RAPIER.init() перед первым использованием. Именно этот пакет под капотом у @react-three/rapier. Ставьте его по умолчанию, а на обычный @dimforge/rapier3d переходите, когда важен размер и сборщик точно переваривает wasm. Apache-2.0.
SDK для glTF 2.0 от Дона Маккёрди: читает файл в объектную модель документа, даёт править меши, материалы, узлы и анимации кодом и писать обратно - и в Node, и в браузере. Основа для собственных пайплайнов оптимизации ассетов. Развивается активно, релизы регулярные, TypeScript из коробки. Сам по себе core умеет только базовый glTF: расширения живут в @gltf-transform/extensions, готовые оптимизации - в @gltf-transform/functions. MIT.
Поддержка расширений glTF для @gltf-transform/core: KHR_draco_mesh_compression, KHR_texture_basisu, EXT_meshopt_compression, KHR_materials_* (clearcoat, transmission, volume, sheen), KHR_lights_punctual и прочее. Без него core прочитает файл, но выкинет всё нестандартное при записи - а это ровно то, чем ужимают ассеты. Ставится в паре с core той же версии, номера у пакетов синхронные. Развивается вместе с ядром, MIT, вес небольшой.
Готовые операции над glTF поверх core: dedup, prune, weld, simplify (через meshoptimizer), квантование, сжатие текстур в KTX2/WebP, draco, инстансинг, обрезка анимаций. Ровно это и делает CLI gltf-transform - берите пакет, когда оптимизацию надо встроить в свою сборку, а не гонять руками. Модель ужимается в разы почти без потерь. Тянет ndarray и кодеки для картинок, так что для браузера смотрите на размер. MIT, развивается активно.
Набор CC0-ассетов, упакованных в base64 прямо в JS-модули: HDRI-окружения (studio, city, sunset, dawn), матcap'ы, карты нормалей, шрифт Inter для troika-текста. Каждый файл импортируется отдельно и лениво, так что в бандл попадает только взятое. Смысл - убрать зависимость от CDN: демо и оффлайн-сборки работают без сети и без CORS-плясок. Лицензия CC0-1.0, приписывать никого не надо. Последний релиз - сентябрь 2024, но это просто данные.
Хелперы в духе drei, но без React: Grid, softShadows на PCSS, MeshRefractionMaterial, MeshTransmissionMaterial, caustics, водяной шейдер, pcss, набор эффектов. Берут, когда пишут на голой three, а красивое из drei-демок повторять руками не хочется. Полного паритета с drei нет - переносят по мере надобности, список заметно короче. Peer three >=0.137, релизы регулярные. Тянет meshline и glsl-noise. Импорты пофайловые, лишнее в бандл не попадёт.
Таргет react-spring для React Three Fiber: `useSpring` отдаёт animated-значения, а `<a.mesh>` двигает объект прямо в кадровом цикле, минуя ре-рендер React. Пакет свежий (10.1.x, лето 2026), пиры мягкие - three от 0.126, R3F от 6, React вплоть до 19. Описание в npm устарело и пугает «версией 6 R3F»: с восьмёркой и девяткой всё работает. Берите под прерываемые пружины и жесты; для покадровой режиссуры и таймлайнов ближе GSAP или Theatre.js.
Слой доступности для канваса: оборачиваете объект в `<A11y>` и получаете фокус с клавиатуры, tab-порядок, роль кнопки или ссылки и описание для скринридера - через скрытые DOM-узлы поверх сцены. Штука до сих пор единственная готовая в своём роде, но висит на 3.0.0 с 2022 года: внутри zustand 3, пиры прибиты к R3F 8 и React 18. С R3F 9 и React 19 ставится только через overrides и толком никем не проверена, так что закладывайтесь на ручную доводку.
Хуки физики поверх cannon-es, где солвер крутится в Web Worker, а в React прилетают только готовые матрицы. API приятный: `useBox`, `useSphere`, ref на меш - и тело живёт само, главный поток свободен. Но релизов нет с августа 2023, а pmndrs давно советует @react-three/rapier: тот на Rust и WASM, быстрее и активно развивается. Cannon имеет смысл в старых проектах или когда важен именно воркерный изолированный солвер. Пиры: R3F от 8, three от 0.139.
Булевы операции над геометрией прямо в JSX: `<Geometry><Base/><Subtraction/><Addition/></Geometry>` - и вырезанные в стене окна собираются декларативно, без ручных вызовов Evaluator. Под капотом three-bvh-csg и three-mesh-bvh, поэтому считается быстро и годится даже на лету, а не только на этапе сборки модели. Версия 4.0.0 от марта 2025, зависимости прибиты к three-bvh-csg 0.0.16 и bvh 0.6.x: на свежем three нужны overrides либо прямой вызов CSG.
Флексбокс-раскладка внутри трёхмерной сцены на движке Yoga: `<Flex>` и `<Box>` расставляют меши по привычным CSS-правилам, чтобы не считать координаты руками. Идея хорошая, состояние - нет: последний релиз 1.0.1 вышел в декабре 2022, пир жёстко прибит к React 18, и npm ругается при установке на 19. Для новых проектов берите @react-three/uikit - там та же Yoga, но живые релизы, инстансинг и целый набор готовых компонентов.
Уносит канвас R3F в Web Worker через OffscreenCanvas: главный поток остаётся свободным, и сцена не дёргается от React, скролла и layout'а. Работает как `<Offscreen worker={...} fallback={...}/>`, сцена живёт отдельным модулем внутри воркера. Вещь экспериментальная: версия 0.0.8 с мая 2023, пиры на R3F 8, события пробрасываются ограниченно, DOM в воркере нет вовсе. Выигрыш на тяжёлых сценах заметный, но отладка отнимет время.
Обёртка над библиотекой postprocessing для R3F: `<EffectComposer>` плюс `<Bloom>`, `<DepthOfField>`, `<SSAO>`, `<Vignette>`. Эффекты сливаются в один проход, а не в цепочку рендер-таргетов, поэтому дешевле ручного EffectComposer из примеров three. Третья мажорная требует React 19, R3F от 9.7, three от 0.156 и postprocessing 6.36 - если сидите на R3F 8, оставайтесь на второй. В комплекте едет n8ao, быстрый ambient occlusion.
Рендерит дерево R3F без WebGL и без браузера, чтобы сцену можно было проверить в Vitest или Jest: ищете объекты по типу и пропсам, дёргаете `fireEvent`, прокручиваете кадры через `advanceFrames`. Это проверка графа сцены и логики, а не картинки - визуальные регрессии всё равно ловятся Playwright'ом со скриншотами. Версия 9.1.1 свежая, но пиры жёсткие: React 19 и R3F от 9; под восьмёрку остаётся ветка 8.x.
Полноценный интерфейс внутри сцены: флексбокс на Yoga, пропсы в духе Tailwind, скролл, тени, скругления - и всё это инстансится в считанные draw-call'ы вместо DOM-оверлея через `<Html>`. Сверху идут готовые киты компонентов в стиле shadcn и Apple. Релизы регулярные (1.0.7x, сентябрь 2026), пиры мягкие: R3F от 8, React от 18, лицензия по факту MIT. Главный кандидат вместо заброшенного @react-three/flex и оверлеев поверх канваса.
WebXR для R3F: VR- и AR-сессии, контроллеры, трекинг рук, hit-test на реальных поверхностях, телепорт и порталы. Шестая мажорная - переписанная с нуля библиотека поверх @pmndrs/xr: вместо компонента `<XR>` теперь стор через `createXRStore()`, так что переезд с 5.x не косметический, читайте гайд по миграции. Пиры мягкие (three любой, R3F от 8, React от 18), лицензия MIT, релизы регулярные. Для отладки без шлема пригодится WebXR Emulator.
Рантайм Theatre.js: проигрывает анимации, собранные мышкой в студии, и хранит их обычным JSON. В прод едет только core - лёгкий, без редактора, под Apache-2.0. Модель простая: проект, шиты, объекты со свойствами, кривые и подписка на изменение значений, дальше вы сами решаете, куда их применять. Проект замер на 0.7.2 с мая 2024, так что обновления three и React разгребать придётся самому. Для анимаций из кода проще GSAP: Theatre - про ручную режиссуру.
Мост Theatre.js в React Three Fiber: `<SheetProvider>`, `editable.mesh` и снапшот-редактор с гизмо - камеру и объекты двигаете прямо в браузере, а значения пишутся в проект и уезжают в JSON. Главная засада в пирах: заявлен @react-three/fiber ^8.13.6, то есть честной совместимости с R3F 9 и React 19 нет, только установка через force на свой риск. Релиз 0.7.2 от мая 2024, дальше тишина. Сам пакет Apache-2.0, но студия рядом идёт под AGPL.
Сам редактор: таймлайн, кривые и кейфреймы поверх работающего приложения, значения правятся вживую. Ставится только в dev - в прод уходит один @theatre/core с выгруженным JSON. Отдельно смотрите лицензию: студия под AGPL-3.0, а не Apache, как core; для внутреннего инструмента это обычно не мешает, но юристы иногда возражают. Версия 0.7.2 от мая 2024, разработка стоит. Живая альтернатива под те же задачи - таймлайны GSAP с GSDevTools.
Выбор редакции