pmndrs/react-three-fiber

Что это?

Ключевые возможности

• 01Описывайте сцены Three.js с помощью JSX-элементов, напрямую соответствующих объектам Three.js.
• 02Используйте состояние React и обработчики событий, например onClick и onPointerOver, для 3D-объектов.
• 03Запускайте логику для каждого кадра внутри цикла рендеринга с помощью хука useFrame.
• 04Получайте доступ к любым функциям Three.js, не дожидаясь обновлений библиотеки.
• 05Поддерживается React Native через отдельную точку входа.

Сценарии использования

• Создание интерактивных 3D-конфигураторов товаров или визуализаций данных в приложении на React.
• Создание переиспользуемых компонентов 3D-интерфейса с собственным состоянием и анимациями.
• Добавление 3D-сцен в мобильное приложение на React Native.
• Написание в Node модульных тестов для компонентов 3D-сцен с помощью тестового рендерера.

Быстрый старт

1. 1

   Установите пакеты с помощью npm

   npm install three @types/three @react-three/fiber
2. 2

   Создайте Canvas и отрисуйте сцену с помощью компонентов JSX (см. пример в README)

Что важно знать

• !Версия react-three-fiber должна соответствовать основной версии React: v8 работает с react@18, а v9 — с react@19.

Темы

Частые вопросы

Что такое react-three-fiber?

React-рендерер для Three.js, позволяющий декларативно собирать 3D-сцены с помощью JSX-компонентов. react-three-fiber (@react-three/fiber) — это React-рендерер для Three.js. Вместо того чтобы императивно создавать меши, материалы и источники света, вы описываете их в виде JSX-элементов, например <mesh /> или <ambientLight />, каждый из которых соответствует объекту Three.js. Компоненты могут хранить собственное состояние React, обрабатывать события указателя и подписываться на цикл рендеринга с помощью хуков вроде useFrame.

react-three-fiber можно использовать бесплатно? Какая у него лицензия?

react-three-fiber распространяется с открытым исходным кодом под лицензией MIT. Перед использованием в коммерческих продуктах проверьте условия лицензии.

react-three-fiber всё ещё поддерживается?

Активно поддерживается. Последний коммит в react-three-fiber — 21 окт. 2026 г..

Для чего можно использовать react-three-fiber?

Создание интерактивных 3D-конфигураторов товаров или визуализаций данных в приложении на React. Создание переиспользуемых компонентов 3D-интерфейса с собственным состоянием и анимациями. Добавление 3D-сцен в мобильное приложение на React Native. Написание в Node модульных тестов для компонентов 3D-сцен с помощью тестового рендерера.

Как установить react-three-fiber?

Установите пакеты с помощью npm: npm install three @types/three @react-three/fiber Создайте Canvas и отрисуйте сцену с помощью компонентов JSX (см. пример в README)

Где скачать react-three-fiber?

Исходный код и инструкции по установке — на GitHub: https://github.com/pmndrs/react-three-fiber