Repolode
Предложить
pmndrs

pmndrs/drei

Коллекция готовых React-компонентов и хуков для создания 3D-сцен с react-three-fiber.

Открыть на GitHubСайт
Звёзды
9,994
Форки
853
Открытые issues
136
Последний коммит
вчера

Что это?

drei — библиотека вспомогательных компонентов для react-three-fiber, React-рендерера для Three.js. Она предлагает готовые компоненты и хуки для типичных задач в 3D, избавляя разработчиков от необходимости с нуля реализовывать управление камерой, загрузчики, тени, текст и шейдерные материалы.

Библиотека разделена по категориям. В ней есть камеры и средства управления, например CameraControls, ScrollControls и KeyboardControls; гизмо, например TransformControls и GizmoHelper; абстракции для Text, Image, Edges и Trail; инструменты для оформления сцены, такие как Environment, Sky, Stars и ContactShadows; а также утилиты для повышения производительности, включая Instances, Merged и AdaptiveDpr. В комплект также входят хуки-загрузчики, например useGLTF и useTexture.

Пакет опубликован под именем @react-three/drei. Веб-версия по умолчанию экспортирует Html и Loader, а отдельная версия для React Native не включает эти два компонента. Документация размещена на отдельном сайте с интерактивными примерами Storybook.

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

  • 01Готовые компоненты для управления камерой, гизмо и ввода с клавиатуры или прокрутки
  • 02Абстракции для 3D-текста, изображений, рёбер, следов и контуров
  • 03Хуки-загрузчики, например useGLTF, useTexture и useFBX
  • 04Инструменты для оформления сцены: карты окружения, небо, тени и освещение
  • 05Утилиты для повышения производительности, включая инстансинг, объединение геометрии и адаптивное разрешение
  • 06Отдельные точки входа для веба и React Native

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

  • Создание интерактивных просмотрщиков товаров с управлением вращением камеры и загруженными моделями glTF
  • Добавление 3D-текста, HTML-слоёв или анимаций, связанных с прокруткой, на сайт на React
  • Создание сцен с мягкими тенями, освещением от окружения и отражающими материалами
  • Эффективный рендеринг большого количества повторяющихся мешей в приложении на React Three Fiber

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

  1. 1

    Установите пакет из npm

    npm install @react-three/drei

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

  • В маршруте для React Native (@react-three/drei/native) не экспортируются Html и Loader.
  • Пакет создан для react-three-fiber, поэтому необходимо также настроить @react-three/fiber.

Темы

#react#threejs#3d#webgl#react-three-fiber#graphics#helpers#hooks

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

Что такое drei?
Коллекция готовых React-компонентов и хуков для создания 3D-сцен с react-three-fiber. drei — библиотека вспомогательных компонентов для react-three-fiber, React-рендерера для Three.js. Она предлагает готовые компоненты и хуки для типичных задач в 3D, избавляя разработчиков от необходимости с нуля реализовывать управление камерой, загрузчики, тени, текст и шейдерные материалы.
drei можно использовать бесплатно? Какая у него лицензия?
drei распространяется с открытым исходным кодом под лицензией MIT. Перед использованием в коммерческих продуктах проверьте условия лицензии.
drei всё ещё поддерживается?
Активно поддерживается. Последний коммит в drei — 19 окт. 2026 г..
Для чего можно использовать drei?
Создание интерактивных просмотрщиков товаров с управлением вращением камеры и загруженными моделями glTF Добавление 3D-текста, HTML-слоёв или анимаций, связанных с прокруткой, на сайт на React Создание сцен с мягкими тенями, освещением от окружения и отражающими материалами Эффективный рендеринг большого количества повторяющихся мешей в приложении на React Three Fiber
Как установить drei?
Установите пакет из npm: npm install @react-three/drei
Где скачать drei?
Исходный код и инструкции по установке — на GitHub: https://github.com/pmndrs/drei

Описание создано ИИ на основе README проекта. Статистика GitHub обновляется ежедневно.

Похожие проекты