NETROOM
Готовый компонент для графа с силовой раскладкой в 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.
Внутреннее ядро Tweakpane: система блейдов, ввода, событий и тем, на которой строятся сам пакет и сторонние плагины. В приложение его напрямую не ставят - нужен, только если пишете свой плагин и импортируете типы вроде `BladePlugin` или `ValueController`. Версия 2.0.5 идёт в паре с tweakpane 4.x, и мажоры у них разъезжаются: под четвёртую панель нужен именно core 2.x. Обычному потребителю крутилок хватает пакета tweakpane, ядро приедет транзитивно.
Жесты как хуки: `useDrag`, `usePinch`, `useWheel`, `useHover` отдают готовые обработчики со скоростью, направлением, инерцией и границами - остаётся передать значения в анимацию. Классическая связка с react-spring, но работает и с motion, и с обычным стейтом; в сцене R3F вешается на события меша или прямо на DOM-узел канваса. Версия 10.3.1 от марта 2024, обновлений давно нет, зато API устоялось и багов не прибавляется. React от 16.8, MIT.
OrbitControls, доросшие до продакшена: инерция и плавное затухание, truck/dolly/pedestal, перелёты камеры с промисами, fitToBox, ограничение по коллайдерам. Берут, когда камера - часть интерфейса, а не просто «покрутить модель». Импорт three делается вручную через CameraControls.install({ THREE }), чтобы не тащить лишнее в бандл. Peer three >=0.126, обновляется бодро. Учтите: v3 приехала с ломающими правками, с 2.x просто так не мигрировать.
