drei

Растущая коллекция полезных помощников и полнофункциональных готовых абстракций для @react-three/fiber.

Если вы создаете компонент, который достаточно общий, чтобы быть полезным другим, подумайте о ВКЛАДЕ!

npm install @react-three/drei

Важный

этот пакет использует отдельную библиотеку three-stdlib вместо three/examples/jsm .

Основное использование

 import { PerspectiveCamera , PositionalAudio , ... } from '@react-three/drei' 

React-родной

 import { PerspectiveCamera , PositionalAudio , ... } from '@react-three/drei/native'

native маршрут библиотеки не экспортирует Html или Loader . По умолчанию экспорт библиотеки — web , которая экспортирует Html и Loader .

Документация

https://pmndrs.github.io/drei

Старый документ

[!WARNING] Ниже приведен архив якорных ссылок с их новым расположением на веб-сайте документации. Не обновляйте ссылки ниже, они предназначены только для справки.

Камеры

ПерспективаКамера

Документация переехала сюда

ОртографическаяКамера

Документация переехала сюда

КубКамера

Документация переехала сюда

Элементы управления

КамераУправление

Документация переехала сюда

Элементы управления прокруткой

Документация переехала сюда

ПрезентацияЭлементы управления

Документация переехала сюда

КлавиатураУправление

Документация переехала сюда

FaceControls

Документация переехала сюда

Элементы управления MotionPath

Документация переехала сюда

Вещицы

GizmoHelper

Документация переехала сюда

PivotControls

Документация переехала сюда

Перетаскивание элементов управления

Документация переехала сюда

Трансформированиеконтроли

Документация переехала сюда

Сетка

Документация переехала сюда

Помощник/использоватьПомощник

Документация переехала сюда

Формы

Коробка, Сфера, Круг, Конус, Цилиндр, Трубка, Тор, Торовый узел, Кольцо, Тетраэдр, Многогранник, Икосаэдр, Октаэдр, Додекаэдр, Выдавливание, Токарный станок, Форма

Документация переехала сюда

Округленная коробка

Документация переехала сюда

ЭкранКвад

Документация переехала сюда

Линия

Документация переехала сюда

КвадратичнаяЛиния Безье

Документация переехала сюда

КубическийБезьеЛиния

Документация переехала сюда

КэтмуллРомЛайн

Документация переехала сюда

Лицевая сетка

Документация переехала сюда

Абстракции

Изображение

Документация переехала сюда

Текст

Документация переехала сюда

Текст3D

Документация переехала сюда

Эффекты

Документация переехала сюда

ПозиционноеАудио

Документация переехала сюда

Рекламный щит

Документация переехала сюда

Экранное пространство

Документация переехала сюда

ScreenSizer

Документация переехала сюда

ГрадиентТекстура

Документация переехала сюда

Края

Документация переехала сюда

Контуры

Документация переехала сюда

Тащить

Документация переехала сюда

Сэмплер

Документация переехала сюда

ВычисляемыйАтрибут

Документация переехала сюда

Клонировать

Документация переехала сюда

использовать анимации

Документация переехала сюда

Марширующие кубики

Документация переехала сюда

наклейка

Документация переехала сюда

Свг

Документация переехала сюда

AsciiRenderer

Документация переехала сюда

Сплат

Документация переехала сюда

Шейдеры

СеткаОтражательМатериал

Документация переехала сюда

СеткаКолебаниеМатериал

Документация переехала сюда

СеткаИскажениеМатериал

Документация переехала сюда

СеткаПреломлениеМатериал

Документация переехала сюда

СеткаПередачаМатериал

Документация переехала сюда

СеткаОтброситьМатериал

Документация переехала сюда

ТочкаМатериал

Документация переехала сюда

Мягкие тени

Документация переехала сюда

шейдерМатериал

Документация переехала сюда

Модификаторы

CurveModifier

Документация переехала сюда

Разное

использоватьContextBridge

Документация переехала сюда

Пример

Документация переехала сюда

HTML

Документация переехала сюда

ЦиклRaycast

Документация переехала сюда

Выбирать

Документация переехала сюда

Спрайт-аниматор

Документация переехала сюда

Статистика

Документация переехала сюда

StatsGl

Документация переехала сюда

Каркас

Документация переехала сюда

использоватьDepthBuffer

Документация переехала сюда

Фбо/использоватьФБО

Документация переехала сюда

использовать камеру

Документация переехала сюда

CubeCamera/useCubeCamera

Документация переехала сюда

ОбнаружитьGPU/useDetectGPU

Документация переехала сюда

использоватьАспект

Документация переехала сюда

использоватькурсор

Документация переехала сюда

использоватьIntersect

Документация переехала сюда

использоватьBoxProjectedEnv

Документация переехала сюда

Тропа / использованиеТрейл

Документация переехала сюда

использоватьSurfaceSampler

Документация переехала сюда

ЛицоОриентир

Документация переехала сюда

Загрузка

Погрузчик

Документация переехала сюда

Прогресс/использованиеПрогресс

Документация переехала сюда

Глтф/использованиеGLTF

Документация переехала сюда

Фбх/использоватьFBX

Документация переехала сюда

Текстура/использованиеТекстура

Документация переехала сюда

Ktx2 / использоватьKTX2

Документация переехала сюда

Кубическая текстура/использование кубической текстуры

Документация переехала сюда

Видеотекстура/использованиевидеотекстуры

Документация переехала сюда

TrailTexture/useTrailTexture

Документация переехала сюда

использовать шрифт

Документация переехала сюда

использоватьSpriteLoader

Документация переехала сюда

Производительность

Экземпляры

Документация переехала сюда

Объединено

Документация переехала сюда

Очки

Документация переехала сюда

Сегменты

Документация переехала сюда

Подробный

Документация переехала сюда

Предварительная загрузка

Документация переехала сюда

ЗапекатьТени

Документация переехала сюда

сеткаГраницы

Документация переехала сюда

АдаптивныйДпр

Документация переехала сюда

Адаптивные события

Документация переехала сюда

Бвх

Документация переехала сюда

Монитор производительности

Документация переехала сюда

Порталы

Худ

Документация переехала сюда

Вид

Документация переехала сюда

РендерТекстура

Документация переехала сюда

РендерКубТекстура

Документация переехала сюда

Рыбий глаз

Документация переехала сюда

Маска

Документация переехала сюда

СеткаПорталМатериал

Документация переехала сюда

Постановка

Центр

Документация переехала сюда

Изменить размер

Документация переехала сюда

BBAnchor

Документация переехала сюда

Границы

Документация переехала сюда

КамераВстряхните

Документация переехала сюда

Плавать

Документация переехала сюда

Этап

Документация переехала сюда

Фон

Документация переехала сюда

Тень

Документация переехала сюда

Каустика

Документация переехала сюда

КонтактыТени

Документация переехала сюда

РандомизированныйСвет

Документация переехала сюда

НакопительныеТени

Документация переехала сюда

Прожектор

Документация переехала сюда

ПрожекторСветТень

Документация переехала сюда

Среда

Документация переехала сюда

Светообразователь

Документация переехала сюда

Небо

Документация переехала сюда

Звезды

Документация переехала сюда

блестки

Документация переехала сюда

Облако

Документация переехала сюда

использоватьОкружающая среда

Документация переехала сюда

MatcapTexture/useMatcapTexture

Документация переехала сюда

Нормальнаятекстура/использованиенормальнойтекстуры

Документация переехала сюда

ТеньАльфа

Документация переехала сюда

Дев

УСТАНОВИТЬ

$ corepack enable
$ yarn install

Тест

Местный

Предварительные требования:

• $ npx playwright install

Чтобы запустить визуальные тесты локально:

$ yarn build
$ yarn test

Чтобы обновить снимок:

$ PLAYWRIGHT_UPDATE_SNAPSHOTS=1 yarn test 

Докер

Важный

Снимки зависят от системы, поэтому для запуска Playwright в той же среде, что и CI:

$ docker run --init --rm 
    -v $( pwd ) :/app -w /app 
    ghcr.io/pmndrs/playwright:drei 
      sh -c " corepack enable && yarn install && yarn build && yarn test "

Чтобы обновить снимок:

$ docker run --init --rm 
    -v $( pwd ) :/app -w /app 
    -e PLAYWRIGHT_UPDATE_SNAPSHOTS=1 
    ghcr.io/pmndrs/playwright:drei 
      sh -c " corepack enable && yarn install && yarn build && yarn test "